javascript - 在history.listen的useEffect中使用useState钩子(Hook)

Question

在监听 useEffect 中的 history 更改时，我在 useState 方面遇到了一些问题。

当路径名更改时，setState会启动，但随后状态会被添加回来。

例如，我有一个收集通知组的 flag 组件，但在 pathname 更改时，我希望所有标志都被忽略并从 中删除状态。

标志组件

const PageFlag = ({ history }: InterfaceProps) => {
const { contextData, dismissFlag, dismissAllFlags } = useContext(GlobalConsumer);

  useEffect(() => {
    history.listen(() => {
      dismissAllFlags();
    });
  });

  return (
    <>
      <FlagGroup onDismissed={dismissFlag}>
        {contextData.flags.map((flag, index) => (
          <Flag key={index} {...flag} />
        ))}
      </FlagGroup>
    </>
  );
};

History 属性用于 import { withRouter } from 'react-router-dom'

dismissAllFlags 的状态和函数在 createContext 组件中显示为

const DefaultState: InterfaceState = {
  otherStateExample: false,
  flags: []
};

export const GlobalConsumer = createContext({
  contextData: DefaultState,
  addFlag: (flagData: any) => {},
  dismissFlag: () => {},
  dismissAllFlags: () => {}
});

export const GlobalProvider = ({ children }: InterfaceProps) => {
  const [state, setState] = useState<InterfaceState>({
    ...DefaultState
  });

  return (
    <GlobalConsumer.Provider
      value={{
        contextData: state,
        addFlag: (flagData: any) => {
          setState({ ...state, flags: [flagData].concat(state.flags) });
        },
        dismissFlag: () => {
          setState({ ...state, flags: state.flags.slice(1) });
        },
        dismissAllFlags: () => {
          setState({ ...state, flags: [] });
        }
      }}
    >
      {children}
    </GlobalConsumer.Provider>
  );
};

问题出现了，在 pathname 更改时，dismissAllFlags 使用 setState 将 flags 设置为 [] 但随后使用 flags 添加回之前的状态。

如何删除所有标志，但记住其他项目的当前状态？

Answer 1

您缺少 useEffect() 上的第二个输入参数，这将导致在每次渲染时读取监听器。

它应该看起来像这样，注意你也不应该需要内部函数。

useEffect(() => {
  history.listen(dismissAllFlags)
}, []);