小编Hyu*_*ang的帖子

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

AFAIK,在 React 函数组件中,必须使用useEffect如下componentWillUnmount功能:

useEffect(()=>{
  return console.log("component unmounting");
},[])
Run Code Online (Sandbox Code Playgroud)

我正在制作一个表单页面,并希望在用户退出页面时提交进度。所以我正在考虑在清理过程中提交。

但是,如果我不将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
Run Code Online (Sandbox Code Playgroud)

post reactjs use-effect use-state

5
推荐指数
1
解决办法
638
查看次数

标签 统计

post ×1

reactjs ×1

use-effect ×1

use-state ×1