Next.js的index.js页面使用getInitialProps无法渲染内容如何解决

你的代码存在两个核心问题，修复后即可正常渲染：

• getInitialProps未等待异步请求完成就返回数据
  因为getUsers是异步函数，你当前的写法没有通过await等待它执行完成，函数会直接返回初始化的空elements数组。你在控制台能看到数据是因为.then回调晚于return执行，此时数组虽然被填充，但已经无法同步到返回给组件的props里。
• 组件内map遍历未返回JSX元素
  你在map的回调函数里用了花括号包裹逻辑，但没有写return语句，遍历结束后返回的是全undefined的数组，自然不会渲染任何内容。

修复后的完整代码 #

import { getUsers } from "../utils/users";
import React from "react";

Home.getInitialProps = async (ctx) => {
  // 等待异步请求完成再处理数据
  const res = await getUsers()
  const elements = res.map(el => el.name)
  return { elements };
};

function Home({ elements }) {
  return (
    <div>
      {/* 用圆括号替代花括号可省略return直接返回JSX */}
      {elements.map((el, i) => (
        <p key={i}>{el}</p>
      ))}
    </div>
  );
}

export default Home;

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