Question

假设我有一个依赖于身份验证的应用程序

我为此使用了 context-api (react)，因此所有需要用户详细信息和相关功能的组件都可以访问它

现在我在哪里指定？

问题是 gatsby 的工作方式是它有页面，而不是像根应用程序那样所有路由都像 react 一样

所以我所做的是有一个类似所有页面的包装器的组件，它为所有页面提供相同的样式和上下文

所以现在所有页面都可以访问用户

但这里是问题 - 所有页面仍然无法访问相同的全局状态

即假设我从联系页面转到博客页面，提供程序正在“重新运行”

如果每次我迁移到新页面时提供程序都重新运行会发生什么？

useEffect 重新运行，再次获取用户

上下文

export const AuthContext = createContext();
    
export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
    
  // HERE LIES THE PROBLEM...THIS WILL BE RUN EVERYTIME I GO TO A NEW PAGE
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((userSnapshot) => {
      if (userSnapshot) {
        setUser({ email: userSnapshot.email });
      }
      setLoading(false);
    });
  return unsubscribe;
  }, []);
    
  const values = { loading, user, signup, signin, signout };
    
  return (
    <AuthContext.Provider value={values}>
          {children}
    </AuthContext.Provider>
  );
};

布局

export const Layout = ({ children }) => {
  return (
    <div>
      <Container>
       <AuthContextProvider>
         <Header />
         {children}
       </AuthContextProvider>
      </Container>
    </div>
  );
};

页面

export const AnyPage = () => {
  const context = useContext(AuthContext);
    return (
      <Layout>
        {context.user && <p>i am groot</p>}        
      </Layout>
    );
}

现在我假设同样会发生，无论是 redux 还是其他任何东西 -

每次我去一个新页面，状态的水合都会再次发生......

我犯了一个非常愚蠢的错误......

反应和全局状态

0 个答案: