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

Question

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

所以问题是：如果用户要离开，我想检查我的组件内部，显示提示，如果他单击“确定”按钮，我想在离开之前从我的后端删除所有添加的图片。我该如何检测？

我的简化代码段：

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

当您离开页面时，组件方法 componentWillUnmount() 会触发。我不记得如果你只是关闭浏览器 window 而不是只是离开，我不记得它是如何表现的，我也不记得你如何逃脱它并留在组件上，但这至少应该是一个对你来说很好的起点。显然，您必须为此做一个 class 扩展 React.Component 而不是直接函数。

Answer 2

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

在Class React Component中可以使用React componentWillUnmount()，在Function Component中可以使用useEffect cleanup function

函数组件代码


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>
  );
}

Class 组件的代码


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>
    );
  }
}

如果你想要任何参考，你可以检查这个codesandbox

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

Delete images if the user is leaving the component React

javascript

routes

prompt

reactjs