如何在useeffect中使用fresh state，但只在unmount时执行cleanup &g

Question

在React功能组件中，必须使用useEffect来实现componentWillUnmount的功能，如下所示:

useEffect(()=>{
return console.log("component unmounting");
},[])

我正在制作一个表单页面，并希望在用户退出页面时提交进度。所以我想提交内部清理。

但是如果我不将formData状态放入依赖数组中，则在清理期间状态将失效。
如果我确实将formData放入依赖数组中，则每次formData发生变化时都会运行清理。

如何保持状态新鲜，但只在"真正卸载"时运行清理?

const [formData, setFormData] = useState({
input1: 'input1 default',
input2: 'input2 default',
}); // track the form data

useEffect(()=>{
return () => {
axios.post(myFormSubmitURL, formData);
}
}, []); // this will submit the stale data
useEffect(()=>{
return () => {
axios.post(myFormSubmitURL, formData);
}
}, [formData]); // this will submit the data every time it changes

Answer 1

您可以使用react ref和其他效果来存储表单状态的缓存，以便在组件卸载时使用。

const formDataRef = useRef();
const [formData, setFormData] = useState({
input1: 'input1 default',
input2: 'input2 default',
}); // track the form data

useEffect(()=>{
return () => {
axios.post(myFormSubmitURL, formDataRef.current); // <-- access current value
}
}, []);
useEffect(()=>{
formDataRef.current = { ...formData }; // <-- cache form updated data
}, [formData]);