如何使用 React 钩子和 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;
}, []);