相关疑难解决方法(0)

如何能在useEffect钩（或任何其他挂钩的这个问题）可以被用来复制componentWillUnmount？

在传统的类组件中，我将执行以下操作：

class Effect extends React.PureComponent {
    componentDidMount() { console.log("MOUNT", this.props); }
    componentWillUnmount() { console.log("UNMOUNT", this.props); }
    render() { return null; }
}

随着useEffect钩：

function Effect(props) {
  React.useEffect(() => {
    console.log("MOUNT", props);

    return () => console.log("UNMOUNT", props)
  }, []);

  return null;
}

（完整示例：https : //codesandbox.io/s/2oo7zqzx1n）

这是行不通的，因为返回的“清理”功能会useEffect捕获安装过程中的道具，而不会在卸载过程中捕获道具的状态。

我怎么能获得最新版本的道具的useEffect清理，而不在每一个道具的变化运行的函数体（或清理）？

一个类似的问题没有解决获得最新道具的问题。

该反应文档状态：

如果要运行效果并仅将其清除一次（在挂载和卸载时），则可以传递一个空数组（[]）作为第二个参数。这告诉React您的效果不依赖于props或state的任何值，因此它不需要重新运行。

但是在这种情况下，我依赖道具...但仅用于清理部分...

我不明白为什么我的useEffect()React 函数无法访问我的组件的状态变量。当用户放弃在我们的应用程序中创建列表并导航到另一个页面时，我试图创建一个日志。我正在使用useEffect() return复制componentWillUnmount()生命周期方法的方法。你能帮我吗？

代码示例

  let[progress, setProgress] = React.useState(0)

  ... user starts building their listing, causing progress to increment ...

  console.log(`progress outside useEffect: ${progress}`)
  useEffect(() => {
    return () => logAbandonListing()
  }, [])
  const logAbandonListing = () => {
    console.log(`progress inside: ${progress}`)
    if (progress > 0) {
      addToLog(userId)
    }
  }

预期行为

代码将达到addToLog()，导致记录此行为。

观察到的行为

这就是当用户在他们的列表中输入一些内容，导致progress增加，然后离开页面时发生的情况。

• 该useEffect()方法完美运行，并触发该logAbandonListing()功能
• 第一个console.log()（上面useEffect）记录了大于 0 的progress状态
• 第二个console.log()用于日志0 …