如果用户正在离开组件React，则删除图像

Question

我有一个带有拖放组件的表单，在那里我可以上传图像，之后我将这些带有axios的图片发送到我的后端，并将其保存在服务器端，然后在预览模式下重新渲染它。我的问题是，如果用户上传了一些图片，然后他在没有提交表单的情况下切换到另一个页面，添加的图片会无缘无故地留在我的服务器端。

所以问题是:我想要检查我的组件中，如果用户离开，显示一个提示，如果他点击OK按钮，我想在离开之前从我的后台删除所有添加的图片。我怎样才能检测到这个呢？

我的简化代码片段：

function MyComp(props) {
     const [Images,setImages] = useState([]) // in this array I store the recieved image's URL
     const [isBlocking,setIsBlocking] = useState(true) // used for prompt

 const handleSubmit = (event) => {
        event.preventDefault();
        setIsBlocking(false)
      }


 return(
        <Grid container className={classes.mainGrid} direction="row" spacing={2}>
            <Grid item xs={4} xl={4}> 
            
            <Prompt when={isBlocking} message="There are unsaved datas. Are you sure you want to leave?"/>
            
            <form className={classes.form} onSubmit={handleSubmit}>
            ... somecode
       </Grid>
      </Grid>
    )
}
export default MyComp

提前感谢

Answer 1

在React函数组件中，当用户试图离开时，即组件正在卸载时，您可以调用提示

在React的类组件中可以使用React componentWillUnmount()，在Function组件中可以使用useEffect cleanup函数

函数组件的代码

import React, { useEffect } from "react";
import { Link } from "react-router-dom";

export default function Home(props) {
  useEffect(() => {
    return function cleanup() {
      alert("unmounting");
     //call api and execute your code here
    };
  }, []);

  return (
      <div>
        <Link to="/home">
          On Click I will unmount this component and go to /home
        </Link>
      </div>
    </Link>
  );
}

类组件的代码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export default class Test extends Component {
  componentWillUnmount() {
    alert('unmounting component');
    //call your code here
  }
  render() {
    return (
      <div>
        <Link to='/home'>
          On Click I will unmount this component and go to /home
        </Link>
      </div>
    );
  }
}

如果你需要任何参考，你可以勾选这个代码和方框

​

​

Answer 2

当您离开页面时，组件方法componentWillUnmount()将被激发。我不记得如果您简单地关闭浏览器窗口而不是只是导航离开，这是如何表现的，我也不记得您如何摆脱它并停留在组件上，但这至少对您来说应该是一个很好的起点。显然，你必须为这个函数做一个扩展React.Component的类，而不是直接的函数。