如何在 useeffect 中使用新鲜状态，但仅在卸载时执行清理

Question

AFAIK，在 React 函数组件中，必须使用 useEffect 来实现 componentWillUnmount 功能，如下所示：

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

我正在做一个表单页面，想在用户退出页面时提交进度。所以我正在考虑在清理中提交。

但如果我不将 formData 状态放入依赖项数组中，该状态将在清理期间失效。
如果我确实将 formData 放入依赖项数组，则每次 formData.

发生变化时都会进行清理运行

如何保持状态新鲜，但是运行清理只在'real unmount'？

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 引用和附加效果来存储表单状态的缓存，以便在组件卸载时使用。

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

如何在 useeffect 中使用新鲜状态，但仅在卸载时执行清理

how to use fresh state inside the useeffect, but execute cleanup on unmount only

post

reactjs

use-effect

use-state