如何使用钩子清理componentDidUpdate上的异步功能

Question

我有一个要安装的组件，我正在订购一个套接字（异步任务），而在卸载时必须取消订阅（异步）。当组件更新时，我必须退订旧的套接字并订阅新的套接字。我不确定如何使用react挂钩。附上示例代码和框以供参考。

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

Answer 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]);

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