如何使用钩子清理 componentDidUpdate 中的异步函数

Posted 2023-02-23

【中文标题】如何使用钩子清理 componentDidUpdate 中的异步函数

【英文标题】：How to cleanup an async funtion on componentDidUpdate using hooks

【发布时间】：2020-02-09 00:00:51

【问题描述】：

我有一个组件，在其安装时，我订阅了一个套接字（异步任务），并且我必须在卸载时取消订阅（异步）。当组件更新时，我必须取消订阅旧套接字并订阅新套接字。我不确定如何使用反应钩子来做到这一点。附上一个示例代码框以供参考。

https://codesandbox.io/s/clever-robinson-h0gq5

【问题讨论】：

在<Link to="/didMount">SimulateDidMount</Link> 上，您需要放置其他组件而不是应用程序组件。因为当您切换 url 时，应用程序组件会再次呈现......实际上并没有卸载。

【参考方案1】：

我不确定您希望如何在沙箱中实现代码，但我认为在效果中调用和异步任务您可以这样做：

useEffect(() => 
  const timeout = async (msg, time) => 
    await setTimeout(() => 
      console.log(msg);
    , time);
  
  timeout("subscribed to websocket", 2000);
  return () => 
    timeout("unsubscribed to websocket", 3000);
  ;
, [match]);

要在useEffect 中使用async await，您需要在函数中声明它并从那里调用它。