时间戳

首页 > 解决方案 > 使用当前道具反应 useEffect 清理

javascript - 使用当前道具反应 useEffect 清理

问题描述

当组件被卸载但可以访问当前道具时，我遇到了清理 useEffect 的需要。就像 componentWillUnmount 可以通过获取 this.props.whatever

这是一个小例子：单击“设置计数”按钮 5 次，然后查看您的控制台。您将在组件 B 中的 console.log 中看到 0，无论“计数”是否为 5 https://codesandbox.io/embed/vibrant-feather-v9f6o

如何实现在 useEffect 清理功能（在我的情况下为 5）中获取当前道具的行为？

更新： 将计数传递给 useEffect 的依赖项将无济于事，因为：

  1. 每次将新计数传递给道具时都会调用清理
  2. 最后一个值将是 4 而不是所需的 5

标签： javascriptreactjs

解决方案

从另一个人那里引用了这个问题，因此由于没有公认的答案，因此会对其进行一些严重的挖掘。

您想要的行为永远不会发生，因为 B 永远不会以计数值 5 呈现，组件 A 在计数为 5 时不会呈现组件 B，因为它将呈现卸载而不是B，最后一次呈现 B 的值将是 4。

如果您希望 B 在卸载时记录它的最后一个计数值，您可以执行以下操作：

请注意，效果会在所有组件渲染后执行

const useIsMounted = () => {
  const isMounted = React.useRef(false);
  React.useEffect(() => {
    isMounted.current = true;
    return () => (isMounted.current = false);
  }, []);
  return isMounted;
};
const B = ({ count }) => {
  const mounted = useIsMounted();
  React.useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    return () => !mounted.current && console.log(count);
  }, [count, mounted]);

  return <div>{count}</div>;
};
const A = () => {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  if (count === 5) {
    //B will never be rendered with 5
    return <div>Unmounted</div>;
  }

  return (
    <React.Fragment>
      <B count={count} />
      <button onClick={handleClick}>Set count</button>
    </React.Fragment>
  );
};

ReactDOM.render(<A />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读