使用 useeffect 卸载时有反应，数据不变

Question

我在我的 React 项目中使用了这段代码当使用 usestate 更改 data1 时，我看到 data1 更改为 1 但是当卸载组件 data1 为默认值 0 时。怎么了？代码是：

useEffect( () => console.log( ["mount",data1] ), [] );
useEffect( () => console.log( ["will update",data1] ) );
useEffect( () => () => console.log( ["unmount",data1] ), [] );

挂载和更改时的日志：

["mount", "0"]
["will update", "0"]
["will update", "2"]
["unmount", "0"]

Answer 1

当你像这样定义你的效果时

useEffect( () => () => console.log( ["unmount",data1] ), [] );

你基本上在初始渲染时告诉它运行因此回调指向的 data1 是它从闭包继承的初始值并且永远不会更新，因为函数不再初始化

如果出于任何原因您希望 data1 在 useEffect 中可访问，则必须将其作为第二个参数传递给 useEffect

useEffect( () => () => console.log( ["unmount",data1] ), [data1] );

在这种情况下，效果将被清除 data1

的任何更改

您也可以使用 useRef 来存储数据并在卸载时访问它。

function App() {
  const [data1, setData1] = useState(0);
  const refAttr = useRef();
  useEffect(
    () => () => {
      console.log("unmount", refAttr.current);
    },
    []
  );
  useEffect(() => {
    setInterval(() => {
      setData1(data1 => {
        refAttr.current = data1 + 1;
        return data1 + 1;
      });
    }, 1000);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Working demo

Answer 2

我终于在卸载时使用这个函数来获取最后的数据

感谢 "nima arefi" 的编写

const useTaskBeforeUnmount = ( calback, ...data ) => {
        const mounted = React.useRef( null );

        React.useEffect( () => {
            mounted.current = true;
            return () => {
                mounted.current = false;
            };
        }, [] );

        React.useEffect(
            () => () => {
                if ( !mounted.current ) {
                    calback( { ...data } );
                }
            },
            [ calback, ...data ],
        );
    };

然后像这样在我的组件中使用它

useTaskBeforeUnmount( console.log, data1, data2, data3 );

使用 useeffect 卸载时有反应，数据不变

react when use useeffect for unmount , data not change

components

reactjs

react-hooks