使用 useEffect 卸载时做出反应，数据不会改变答案

【问题标题】：react when use useeffect for unmount , data not change使用 useEffect 卸载时做出反应，数据不会改变
【发布时间】：2019-07-22 09:11:11
【问题描述】：

我在我的反应项目中使用此代码当使用 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"]

【问题讨论】：

你能用与状态变量data1相关的代码更新你的代码sn-p吗？或者，更好的是，共享整个组件。
这些对我很有帮助：stackoverflow.com/questions/57023074/…stackoverflow.com/questions/55020041/…

标签： reactjs components react-hooks

【解决方案1】：

当你定义你的效果时

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

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

如果有任何原因，您希望在 useEffect 中可以访问 data1，您必须将其作为第二个参数传递给 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

【讨论】：

我需要卸载 mod.when add data1 at end , useEffect 在 data1 更改时运行，而不是在卸载时运行。使用钩子卸载时如何获取data1？
如果您在最后添加 data1，useEffect 将在 data1 更改时运行回调，但也会在卸载时运行它。另一种方法是利用useRef在其中存储数据，然后在useEffect中从中获取数据
使用参考解决方案更新了答案

【解决方案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 );

【讨论】：