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

Question

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

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

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

但这会导致控制台显示警告Can't perform a React state update on an unmounted component。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。 .

如何从内部 useEffect 取消订阅？

标签： javascriptreactjsreduxreact-hooks

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;
}, []);