Next.js服务端组件API数据map渲染不显示问题求助

你的问题出在map回调函数的写法上——当前回调里定义了<p>{machine.name}</p>但没有返回这个元素，所以React不会渲染任何内容。

修复方案 #

有两种方式可以解决：

1. 去掉大括号，改用小括号（自动返回表达式结果）：

export default async function LoginPage() {
  const res = await fetch("http://127.0.0.1:3000/api/machines");

  if (!res.ok) {
    throw new Error("Failed to fetch machine data");
  }

  const machines = await res.json();

  console.log(machines.data);

  return (
    <main>
      <h1>Login Page</h1>
      <p>Testing...</p>
      {machines.data.map((machine: any) => (
        <p key={machine.id}>{machine.name}</p>
      ))}
    </main>
  );
}

2. 在大括号里显式添加return语句：

export default async function LoginPage() {
  const res = await fetch("http://127.0.0.1:3000/api/machines");

  if (!res.ok) {
    throw new Error("Failed to fetch machine data");
  }

  const machines = await res.json();

  console.log(machines.data);

  return (
    <main>
      <h1>Login Page</h1>
      <p>Testing...</p>
      {machines.data.map((machine: any) => {
        return <p key={machine.id}>{machine.name}</p>;
      })}
    </main>
  );
}

额外建议 #

• 给每个map生成的元素添加唯一的key属性（比如machine.id），这是React的要求，避免渲染警告。
• 尽量不要用any类型，建议定义Machine接口来约束数据类型，提升代码健壮性：

interface Machine {
  id: string;
  name: string;
  // 补充其他字段类型
}

// 然后在map中使用：
machines.data.map((machine: Machine) => ...)

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