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

【问题标题】：Delete images if the user is leaving the component React如果用户要离开组件 React，则删除图像
【发布时间】：2021-04-08 11:28:19
【问题描述】：

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

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

我的简化 sn-p：

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

提前致谢

【问题讨论】：

标签： javascript reactjs routes prompt

【解决方案1】：

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

在 React 的 Class Component 中可以使用 React componentWillUnmount()，在 Function Component 中可以使用 useEffect 清理函数

函数组件代码


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

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

【讨论】：

use 可以在不传递任何参数的情况下添加另一个 useEffect ，它的行为与 componentWillUnmount 相同
确实它可以工作并且可以检测页面离开，但是使用 useEffect 而不添加图像作为依赖结果，在清理函数中我的图像数组是空的，但是状态有值。你知道如何解决这个问题吗？再次感谢你:)
没有任何参数的useEffect只会运行一次，您需要将图像状态作为参数传递，以便每次数据数组更改时都会调用它，然后单独处理组件卸载，如果您可以共享另一个关于代码或沙箱的问题，我可以更好地帮助你
其实我问过，我也收到了解决方案。谢谢你的一切/

【解决方案2】：

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

【讨论】：