javascript - useEffect 不会在路由更改时更新状态

Question

我正在寻找一种解决方案来注册路由更改并应用新的 state使用 setState和 useEffect .下面的当前代码不更新 setState 的函数当路线改变时。

例如，我注册了pathname的 /与 location.pathname === '/'在 createContext 内, 如果 pathname是/ setState的 isHome已注册true , 但是如果 pathname是/page-1 setState已注册false .

在浏览器重新加载时，onMount state已正确设置，但是在使用 Link 更改路线时这没有。另外，请注意我正在使用 Gatsby 并在这样做时导入 { Link } from 'gatsby'

CreateContext.js

export const GlobalProvider = ({ children, location }) => {


const prevScrollY = useRef(0);
  const [state, setState] = useState({
    isHome: location.pathname === '/',
    // other states
  });

  const detectHome = () => {
    const homePath = location.pathname === '/';
    if (!homePath) {
      setState(prevState => ({
        ...prevState,
        isHome: false
      }));
    }
    if (homePath) {
      setState(prevState => ({
        ...prevState,
        isHome: true
      }));
    }
  };

  useEffect(() => {
    detectHome();
    return () => {
      detectHome();
    };
  }, [state.isHome]);

  return (
    <GlobalConsumer.Provider
      value={{
        dataContext: state,
      }}
    >
      {children}
    </GlobalConsumer.Provider>
  );
};

如果我console.log(state.isHome)在 pathname /我得到 true ，我得到的任何其他路径名 false , 但是，如果我改变路线，当前 isHome状态保持以前，直到我滚动和 useEffect适用。

注册点 isHome状态是改变每页的 CSS。

如何使用 useEffect 更新状态改变路线时。以前，我会使用 componentDidUpdate 来完成此操作并注册 prevProps.location.pathname反对props.location.pathname ，但是，我的理解是这不再需要 useEffect钩子(Hook)。

Answer 1

你想要的效果是“当位置改变时更新我的​​状态”，这在 useEffect 代码中翻译如下:

  useEffect(() => {
    detectHome();
    return () => {
      detectHome();
    };
  }, [location]);