我有一个 react 组件,它异步获取一些资源,然后订阅资源更改。
问题是清理函数不在这个资源的闭包中:
useEffect(() => {
const onResourceChange = () => {
console.log('resource changed');
};
getSomeResource().then(resource => {
resource.subscribe(onResourceChange);
});
return () => {
resource.unsubscribe(onResourceChange); // Error! resource is undefined
}
}, []);
由于在 useEffect
中使用异步函数是不允许的,在 useEffect
的清理函数中取消订阅此资源的最佳方法是什么?
最佳答案
我看到这里有两个“副作用”。
- 获取资源(需要发生一次,依赖
[]
) - 订阅/取消订阅回调(需要在资源更改、依赖、
[resource]
时发生)
所以我
- 将它们分成两个“效果”(步骤,每个处理一个副作用)
- 并将其提取到自定义 Hook 中
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
负责取消/订阅回调。
并查看每个useEffect
中的deps
列表(前者为空[]
而后者依赖于[资源]
)
关于javascript - React useEffect 清理函数依赖于 async await 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57115559/