Next.js getInitialProps 未在 index.js 页面上呈现答案

【问题标题】：Next.js getInitialProps not rendering on the index.js pageNext.js getInitialProps 未在 index.js 页面上呈现
【发布时间】：2021-09-28 22:03:09
【问题描述】：

我真的无法弄清楚 Next.js 上的这段代码有什么问题。 index.js：

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

Home.getInitialProps = async (ctx) => {
  let elements = [];
  getUsers().then((res) => {
    res.map((el) => {
      elements.push(el.name);
    });
    console.log(elements);
  });
  return { elements: elements };
};

function Home({ elements }) {
  return (
    <div>
      {elements.map((el, i) => {
        <p key={i}>{el}</p>;
      })}
    </div>
  );
}

export default Home;

这不会在我的主页上呈现任何内容，但控制台仍会在服务器端（在 vscode 控制台内）记录正确的数据。我真的不知道发生了什么，我完全按照 next.js 网站上的article。 getUsers 函数是一个异步函数，它返回一个对象数组（带有名称、姓氏道具），在这种情况下，在.then 中，我正在获取名称并将它们推送到一个正确注销到控制台的数组中。如何使我在页面上呈现的这些数据？肯定和SSR有关。

【问题讨论】：

标签： next.js server-side-rendering

【解决方案1】：

问题在于使用异步函数。尝试如下。

...
elements = await getUsers();
...

在您的代码中，组件在响应完成之前呈现。所以数据不会被渲染。建议使用“async...await...”。事实上，“async”和“await”就像是一对。

【讨论】：

非常感谢你，我没有意识到这么简单的事情......