如何在React JS中使用props根据登录状态动态切换菜单展示

问题修复方案 #

存在的错误点 #

• App组件给Menu传递的属性错误：你将判断登录状态的函数ifLoggedIn作为isLoggedIn属性传入，而非你定义的布尔类型状态isLoggedIn，导致Menu无法拿到正确的登录状态
• Menu组件的showMenu方法重复声明了props形参，调用时未传参导致内部获取的props为undefined，判断逻辑完全失效
• Menu组件内的useEffect没有实际作用，可直接删除
• App组件内的useEffect未添加依赖项，会无限重复执行

修正后的代码 #

App组件

function App(props) {
  const [isLoggedIn, setLoggedIn] = useState(false);

  const ifLoggedIn = () => {
    if (localStorage.getItem("connexion")) {
      setLoggedIn(true);
    } else {
      // 补充未登录时的状态重置逻辑
      setLoggedIn(false);
    }
  };

  useEffect(() => {
    ifLoggedIn();
    console.log(isLoggedIn);
  }, []); // 添加空依赖，只在组件挂载时执行一次

  return (
    <Router>
      <div>
        {/* 传递isLoggedIn状态而非函数 */}
        <Menu isLoggedIn={isLoggedIn} />
        <Switch>
          <Route path="/contact" component={MeContacter} />
          <Route path="/Home" component={Home} />
          <Route path="/" component={Connexion} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

Menu组件

function Menu(props) {
  // 删除重复的props形参，直接使用组件接收的props
  const showMenu = () => {
    if (props.isLoggedIn === true) {
      return (
        <div className="ContainerMenu">
          <ul className="Menu">
            <Link to="/Home">
              <li>who am i</li>
            </Link>
            <li>some of my products</li>
            <Link to="/contact">
              <li>Contact me</li>
            </Link>
            <Link to="/">
              <li className="connexion">Connexion</li>
            </Link>
          </ul>
        </div>
      );
    } else {
      return (
        <div className="ContainerMenu">
          <ul className="Menu">
            <Link to="/">
              <li className="connexion">Connexion</li>
            </Link>
          </ul>
        </div>
      );
    }
  };

  // 删除无用的useEffect
  return <div>{showMenu()}</div>;
}

export default Menu;

补充优化建议 #

如果你需要在用户完成登录/退出操作后实时更新菜单状态，可以将ifLoggedIn方法也通过props传递给登录/退出组件，操作完成后主动调用该方法同步isLoggedIn状态即可。

内容的提问来源于stack exchange，提问作者Xwingoga06