是否对历史记录更新Reaction上下文。推送(&#39；/&#39；) [英] Does a React Context update on history.push('/')

问题描述

我使用带有useEffect钩子的Reaction上下文来设置包装整个应用程序的最外层组件中的变量。在我的应用程序内的一个子组件上，我使用history.push('/')路由回根目录。这不会触发对我的上下文变量的更新。这是意料之中的事吗？如果是，有没有更好的方法来更新我的上下文变量？

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

例如，在以下代码中。不应在history.push('/')

增加var

Conext.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()} />
)

推荐答案

这似乎不会触发对我的上下文变量的更新。这是预期的吗？

更改历史记录不会导致重新呈现上下文提供程序。您提到您有一个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>
  )
}

这篇关于是否对历史记录更新Reaction上下文。推送(&#39；/&#39；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！