Javascript 如何同步React中不同组件的已验证状态？

我已经在这种情况下呆了很长时间了。我当时正在React开发一个应用程序，在我的主页上，我有一个导航栏和另一个组件。我想在这里做的是，当我登录/注销时，我的导航栏和其他组件将同步更改。但实际上，当我在导航栏中单击login/log out时，只有该栏会更改，其他组件保持不变，直到我重新加载页面。如何使登录状态为全局状态？这样每个组件都可以同步更改？我真的很感谢你的帮助

MainPage.js

const MainPage = () => {
  const [isAuth, setAuth] = React.useState(
    window.localStorage.getItem("isAuth")
  );
  const handleLogOut = () => {
    setAuth(false);
    window.dataLayer.push({
      event: "Log Out",
      user: "Anonymous",
      timezone: "Chicago",
    });
    window.localStorage.clear();
    window.alert("You have succesfully logged out!");
  };
  return (
    <div>
      {/* Navigation bar */}
      <Container
        isAuth={isAuth}
        currentPage="Main"
        onLogin={() => {
          setAuth(true);
        }}
        onLogOut={handleLogOut}
      />

      {/* Body */}

      <CardAlign>
        {food.map((foodItem) => (
          <Card foodItem={foodItem} key={`${foodItem.id}`} isAuth={isAuth} />
        ))}
      </CardAlign>

      {/* Buttons */}
      <Buttons isAuth={isAuth} currentPage="Main" />
    </div>
  );
};

const Container = ({ isAuth, currentPage, onLogin, onLogOut }) => {
  return (
    <Header>
      <NavbarDiv>
        {!isAuth && <Login label="Login" onLogin={onLogin} />}
        {isAuth && <LogOut label="Log Out" onLogOut={onLogOut} />}
        {isAuth && <ChangeUser />}
        {isAuth && currentPage !== "Cart" && <Cart />}
        {isAuth && currentPage !== "Profile" && <Profile />}
      </NavbarDiv>
    </Header>
  );
};

Container.js

是我的导航栏，工作正常

---

我真的非常感谢你的帮助！请告诉我问题出在哪里，我如何解决它！谢谢你抽出时间

以下是一个工作示例：

const容器=（{isAuth，onLogin，onLogOut}）=>{
//从道具中使用isAuth、onLogin和onLogout
返回isAuth(
注销
) : (
登录
);
};
常量按钮=（{isAuth}）=>{
返回(
按钮：{isAuth？'logged in'：'logged out'}
);
};
常量应用=（）=>{
const[isAuth，setAuth]=React.useState（false）；
返回(
{
setAuth（真）；
}}
onLogOut={（）=>setAuth（false）}
/>
);
};
ReactDOM.render（，document.getElementById（'root'））
您应该使用util.js文件来处理登录和注销时的所有操作，您应该导出一个函数来检查登录状态，如果您使用内部状态来处理此问题，那么您需要将此状态作为道具传递给每个孩子

您应该将全局状态处理程序用作Redux。或者使用PassportJS或Iron会话。
您正在将isAuth、onLogin和onLogOut传递给容器，但忽略它们，而是在容器中再次创建它们。如果您只使用容器中的道具中的isAuth、onLogin和onLogOut，代码就会工作。谢谢您的回复！我试图修改代码（在原始文本中更新），但在登录后，“登录”和“注销”按钮就消失在导航栏中。你能告诉我怎么修吗？谢谢你的耐心！是的，是的，我想我刚才打错了。你的回答真的很有帮助！谢谢你帮助我！！！！！！！！！！！！祝你今天愉快谢谢你的推荐！我现在已经解决了这个问题，将来会尝试学习Redux！