reactjs - 卸载 react 组件时是否可以调度函数？ ( react 功能组件)

Question

嗨，我正在制作一些调用 api 并将该值保存在状态中的函数，然后它应该在用户离开组件时调度。所以我尝试使用 react useEffect hooks 作为 componentWillUnmount 并使用参数作为状态值调度一些 Action 。
但问题是调度 Action 是有效的，但带有空字符串..我认为以某种方式删除了状态值，然后执行了调度函数。那么当用户离开组件时，我有什么方法可以调用带有状态值的函数吗？

const [userCheck,setUserCheck]=React.useState('')

useEffect(() => {
  
  const fetChItem='this is the function which calling api '
    setUserCheck(fetChItem);

}, []);

useEffect(() => {
  return () => {
    dispatch(saveFetchValue(userCheck));
    
  };
}, []);

Answer 1

问题
由于 shell 如何与 useEffect 一起工作，这将不起作用。打回来。与以下

useEffect(() => {
  return () => {
    dispatch(saveFetchValue(userCheck));
  };
}, []);

您已附上首字母 userCheck返回的清理函数中的状态值 ( "" )。
解决方案
使用 react 引用和第二个 useEffect Hook “缓存”最新状态。

const [userCheck, setUserCheck] = React.useState('');

const userCheckRef = React.useRef(userCheck); // ref to store state value

React.useEffect(() => {
  userCheckRef.current = userCheck; // save userCheck state value to ref
}, [userCheck]);

...

useEffect(() => {
  return () => {
    dispatch(saveFetchValue(userCheckRef.current)); // pass current ref value
  };
}, []);

演示