组件"componentWillUnmount"生命周期方法的反应钩子

Question

我有一个对象，它是属性props的副本。工作和我改变它：

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 
}  
}, []);

No Good无法获取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的文档