有时我会收到一个错误,完整的错误消息是:“警告:无法对未安装的组件执行React状态更新。这是一个no op,但表示应用程序内存泄漏。若要修复,请取消useEffect清理函数中的所有订阅和异步任务。”
解决这个问题的最佳方法是什么?这是我的代码:
const CustomRefresh = (props) => {
const {
isCurrent, isScheduled
} = props;
const [refreshing, setRefreshing] = useState(false);
const inventoryContext = useContext(inventoryContext);
const onRefresh = React.useCallback(async () => {
setRefreshing(true);
if (isCurrent) {
await inventoryContext.refreshToday();
}
if (isScheduled) {
await inventoryContext.refreshScheduled();
}
setRefreshing(false);
}, [refreshing]);
return (
<CustomRefresh refreshing={refreshing} style={style} onRefresh={onRefresh}>
{children}
</CustomRefresh>
);
};
添加一个ref,在其中跟踪它是否已卸载。然后在设置异步设置状态之前,在函数中检查ref:
const unmounted = useRef(false);
useEffect(() => {
return () => { unmounted.current = true };
}, []);
const onRefresh = React.useCallback(async () => {
setRefreshing(true);
if (isCurrent) {
await inventoryContext.refreshToday();
}
if (isScheduled) {
await inventoryContext.refreshScheduled();
}
if (!unmounted.current) {
setRefreshing(false);
}
}, [refreshing]);