是否在 history.push('/') 上更新 React Context

Question

我正在使用带有 useEffect 钩子的 React Context const Context = React.createContext() 在包装整个应用程序的最外层组件中设置一个变量。在我的应用程序中的一个子组件上，我使用history.push('/') 路由回根。这不似乎会触发我的 Context 变量的更新。这是预期的吗？如果是这样，是否有更好的路由方法来更新我的上下文变量？

我正在使用react 16.14.0 & react-router-dom 5.2.0。

例如，在下面的代码中。 var 不应该在 history.push('/') 上增加

Context.js

const Context= React.createContext();

const ContextProvider= (props) => {
  const [var, setVar] = useState(null);

  useEffect(() => {
    setVar(var++)
  }, []);

  return (
    <Context.Provider value={user}>{props.children}</Context.Provider>
  );
};

ChildComponent.js

...
import { useHistory } from "react-router-dom";
...

const ChildComponent = () => {
  const history = useHistory();

  function doSomething(){
    history.push('/')
  }
}
return(
    <Button onClick={() => doSomething()} />
)

Answer 1

这似乎不会触发我的 Context 变量的更新。这是预期的吗？

更改历史不会导致上下文提供程序重新呈现。你提到你有一个useEffect，原则上你可以在那个useEffect中编写一些代码来监听历史，当它发生变化时，它会设置状态以导致重新渲染。如果您认为其中的代码应该监听历史更改，请随时分享，我会对此发表评论。

但是，我建议使用hooks provided by react-router，而不是编写自己的代码来监听更改。 useHistory 和 useLocation 钩子都会监听变化并重新渲染组件。

const Example = () => {
  // When the location changes, Example will rerender
  const location = useLocation();
  const [someState, setSomeState] = useState('foo');

  useEffect(() => {
    if (/* check something you care about in the location */) {
      setSomeState('bar');
    }
  }, [location]);

  return (
    <Context.Provider value={someState}>
      {children}
    </Context.Provider>
  )
}