Question

我有一个对象，它是属性props.Job的副本，我用以下方法进行了更改：

const [jobData, setJobData] = React.useState<IjobData>();
  
const handleJobChange = (name, value) => {
    setJobData({
      ...jobData, [name]: value
    });
  };

现在，我想在卸载组件之前保存jobData的值所以：

React.useEffect(() => () => {
    if (jobData !== props.Job) {
          Save(jobData) // jobData is undefined 
      }  
 }, []);

不好，无法获取jobData的当前状态

所以尝试：

React.useEffect(() => () => {
      if (jobData !== props.Job) {
        Save(jobData) // jobData value is missing the last run of handleJobChange 
      }  
  }, [jobData]);

也不是一件好事：jobData值缺少handleJobChange的上一次运行，并且它在每次handleJobChange运行之前都运行，而不仅仅是“ componentWillUnmount”事件

任何人都可以推荐一种更好的方法来计算正确的事件的状态，以便我保存它？

Answer 1

React.useEffect返回可用于清除的函数。即在卸载/更新组件之前执行一些代码。

因此，对于您的用例，您可以如下修改useEffect：

React.useEffect(() => () => {
    return(()=>{
        if (jobData !== props.Job) {
          Save(jobData) // jobData is undefined 
        } 
    }) 
 }, []);

return语句将在卸载组件之前执行。有关更多详细信息，您可以检查react的documentation

对组件“ componentWillUnmount”生命周期方法的反应挂钩

1 个答案: