javascript - 如何使用 React hooks 和 Redux 从 useEffect 执行 store.unsubscribe

Question

我有一个使用 redux 和 hooks 的 React 无状态组件。我需要显示页面加载时的项目数量(useEffect)，并在每次添加或删除项目时更新它(store.subscribe)

useEffect(() => {
    setState({
        items: store.getState().items.length
    });
}, []);

store.subscribe(() => {
    setState({
        items: store.getState().items.length
    });
});

但这导致控制台显示警告无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明应用程序中存在内存泄漏。要修复此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。.

如何从 useEffect 内部取消订阅？

Answer 1

如果将 useEffect 调用的第二个参数设置为 []，则效果回调函数将充当 ComponentDidMount。如果该回调函数返回一个函数，则该函数将在组件卸载 (ComponentWillUnmount) 之前被调用。

我想这个 setState 应该替换为 setItems ，如下所示。请尝试此代码。

const [items, setItems] = useState([]);
useEffect(() => {
    setItems(store.getState().items.length);
    
    
    const unsubscribe = store.subscribe(() => {
        setItems(store.getState().items.length);
    });
    
    return unsubscribe;
}, []);