javascript - React 无法对未安装的组件执行状态更新

Question

我正在使用以下方法从其他组件控制我的 header 。但是，我在更改页面时遇到了旧的“无法对未安装的组件执行 react 状态更新”错误

export const store = {
    state: {},
    setState(value) {
        this.state = value;
        this.setters.forEach(setter => setter(this.state));
    },
    setters: []
};
store.setState = store.setState.bind(store);

export function useStore() {
    const [ state, set ] = useState(store.state);
    if (!store.setters.includes(set)) {
        store.setters.push(set);
    }

    return [ state, store.setState ];
}

然后我的标题使用它来设置类并控制它是否需要在白底黑字或黑底白字

const Header = () => {
    const [type] = useStore();
    render( ... do stuff )
};

我在页面上的组件导入 useStore，然后根据多种因素调用 setType，某些布局是一种类型，其他一些布局因 API 调用而异，因此有很多不同的组件需要调用该函数设置标题状态。

const Flexible = (props) => {
    const [type, setType] = useStore();
    if( type !== 'dark ){ setType('dark') }
    ... do stuff
};

header 本身总是在页面上，在路由器之前和之外，永远不会卸载。

这一切都工作得很好，并设置了标题状态。但是，当我使用 React Router 更改页面时，出现无法设置状态错误。我不明白为什么会出现此错误。我首先想到该组件可能会尝试使用 React 路由器再次运行，所以我移动了代码以将 header 状态设置为仅在初始化时运行但没有帮助的 useEffect。

Answer 1

你只能添加到 setter，永远不要删除。因此，当组件卸载时，它将保留在 setter 中，下次应用程序的其他部分尝试设置状态时，所有 setter 都会被调用，包括卸载组件的 setter 。这会导致您看到的错误。

您需要修改自定义 Hook 以使用 useEffect，以便在卸载时可以有拆卸逻辑。像这样:

export function useStore() {
  const [ state, set ] = useState(store.state);
  useEffect(() => {
    store.setters.push(set);
    return () => {
      const i = store.setters.indexOf(set);
      if (i > -1) {
        store.setters.splice(i, 1);
      }
    }      
  }, []);

  return [ state, store.setState ];
}