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是它从闭包继承的且由于函数不再初始化而从未更新的初始值

如果有任何原因，无论出于何种原因，您都希望在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

Answer 2

i最终在卸载时使用此功能获取最后一个数据

感谢“尼玛·阿瑞菲”的写作

https://www.googleapis.com/oauth2/v3/userinfo/

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

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

使用useeffect进行卸载时反应不更改数据

2 个答案: