时间戳

首页 > 解决方案 > React useEffect 清理功能依赖于异步等待结果

javascript - React useEffect 清理功能依赖于异步等待结果

问题描述

我有一个反应组件，它异步获取一些资源，然后订阅资源更改。

问题是清理功能不在此资源的关闭中：

useEffect(() => {
  const onResourceChange = () => { 
    console.log('resource changed');
  };

  getSomeResource().then(resource => {
    resource.subscribe(onResourceChange);
  });

  return () => {
    resource.unsubscribe(onResourceChange); // Error! resource is undefined
  }
}, []);

由于useEffect不允许在其中使用异步函数，那么在useEffect的清理函数中取消订阅该资源的最佳方法是什么？

标签： javascriptreactjsasync-awaitreact-hooks

解决方案

我看到这里有两个“副作用”。

  1. 获取资源（需要发生一次，依赖[]）
  2. 订阅/取消订阅回调（需要在资源更改、依赖项时发生[resource]）

所以我

  1. 将它们分成两个“效果”（步骤，每个处理一个副作用）
  2. 并将其提取到自定义钩子中
    function useResource() {
        const [resource, setResource] = useState(undefined)

        const onResourceChange = () => console.log('resource changed');

        // Get the resource, initially.
        useEffect(() => {
          getSomeResource(setResource)
        }, [])

        // When the resource is retrieved (or changed),
        // the resource will subscribe and unsubscribe
        useEffect(() => {
          resource.subscribe(onResourceChange)
          return () => resource.unsubscribe(onResourceChange)
        }, [resource])
    }

    // Use it like this
    function App() {
        useResource()

        return <>your elements</>
    }

如您所见，第一个useEffect只负责获取“资源”，而第二个useEffect负责取消/订阅回调。

并查看deps每个列表useEffect（前者为空[]，后者取决于[resource]）

推荐阅读