React组件无法渲染但console.log正常运行，求助问题排查

你用了forEach遍历数组，但forEach没有返回值——它只是循环执行回调函数，不会把回调里return的组件收集起来，所以JSX里实际渲染的是undefined，这就是组件不显示的核心原因。虽然console.log能正常输出，说明逻辑判断是对的，但返回的组件没被用到。

因为你的导航数组里只有一个current: true的项，用find方法直接定位到这个激活项更高效，然后根据它渲染组件：

import Header from "../components/header";

const navigation = [
  { name: "Chat", href: "#", current: true },
  { name: "Coffee", href: "#", current: false },
  { name: "Gifts", href: "#", current: false },
];

const Home = () => {
  // 找到当前激活的导航项
  const activeNav = navigation.find(element => element.current === true);
  
  return (
    <div>
      {activeNav && (
        <>
          {activeNav.name === "Chat" && <Header />}
          {activeNav.name === "Coffee" && <Header />}
          {activeNav.name === "Gifts" && <Header />}
        </>
      )}
    </div>
  );
};

export default Home;

如果一定要用遍历的方式，把forEach换成map（同时过滤掉非激活项，避免渲染空内容）：

import Header from "../components/header";

const navigation = [
  { name: "Chat", href: "#", current: true },
  { name: "Coffee", href: "#", current: false },
  { name: "Gifts", href: "#", current: false },
];

const Home = () => {
  return (
    <div>
      {navigation.map((element) => {
        if (element.current === true) {
          switch (element.name) {
            case "Chat":
              console.log("Works");
              return <Header key="chat" />;
            case "Coffee":
              return <Header key="coffee" />;
            case "Gifts":
              return <Header key="gifts" />;
            default:
              console.log("Wrong");
              return null;
          }
        }
        // 非激活项返回null，不渲染
        return null;
      })}
    </div>
  );
};

export default Home;

额外注意：

• 原本的Object.values(navigation)是多余的，因为navigation本身就是数组，直接调用数组方法即可。
• 使用map时要给组件加唯一key属性，符合React渲染规范。

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