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

Question

我真的搞不懂 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 函数是一个异步函数，它 returns 一个对象数组（带有 name,surname 道具），在这种情况下 .then 我正在获取名称并将它们推入一个正确记录的数组到控制台。我怎样才能使我在页面上呈现的这些数据？肯定和SSR有关。

Answer 1

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

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

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

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

Next.js getInitialProps not rendering on the index.js page

server-side-rendering

next.js