从 API 获取的数据不会填充 NextJS 中的 table

Question

我尝试在 NextJS 中使用 API 调用填充 table。我使用 getStaticProps 函数获取数据并将它们传递给组件。我尝试使用 map() 函数来访问对象中的每个数据，但它不起作用并且不会填充所需的数据。当我运行应用程序时，控制台输出以下错误。

Warning: data for page "/" is 150 kB, this amount of data can reduce performance.

当我检查页面源代码时，它有完整的 API 对象，但我不明白为什么会这样。下面我放了 index.js 和 CountriesTable.js

的代码

index.js

import Head from "next/head";
import CountriesTable from "../components/CountriesTable/CountriesTable";
import Layout from "../components/Layouts/layout";
import SearchInput from "../components/SearchInput/SearchInput";
import styles from "../styles/Home.module.css";

export default function HomePage({ countries }) {
    return (
        <Layout>
            <div className={styles.counts}>found {countries.length} countries</div>

            <SearchInput placeholder="Search for country" />

            <CountriesTable countries={countries} />
        </Layout>
    );
}

export const getStaticProps = async () => {
    const res = await fetch("https://restcountries.com/v3.1/region/asia");
    const countries = await res.json();

    return {
        props: {
            countries,
        },
    };
};

CountriesTable.js

import styles from './CountriesTable.module.css';

export default function CountriesTable({countries}) {
    return (
        <div>
        <div className={styles.heading}>
            <button className={styles.heading_name}>
                <div>Name</div>
            </button>

            <button className={styles.heading_population}>
                <div>Population</div>
            </button>
        </div>

        {countries.map((country) => { 
            <div className={styles.row}>
            <div className={styles.name}>{country.name}</div>
            <div className={styles.population}>{country.population}</div>
        </div>
        })}
        </div>
    );
};

如何解决控制台中的错误并使用数据填充 table？ TIA！

Answer 1

我无法重现您的控制台警告，但您缺少地图函数中的 return 语句。

这对我有用：

            {countries.map((country, index) => {
                return(
                    <div key={index}>
                        <div>{country.name.common}</div>
                        <div>{country.population}</div>
                    </div>
                    )
                })}

此外，您不需要显示 country.name，因为它是一个对象。我使用了 country.name.common ，它是有效的，因为它是一个字符串。此外，您需要在地图函数内的 div 中添加一个键属性。

Answer 2

NextJS 是一个服务器渲染平台。您传递给 pages/components 的任何道具都将在源本身中 serialized 。因此，trim data 填写必要的字段非常重要。否则，您将在 HTML 源中看到整个 json。（工作 codesandbox）

Reduce the amount of data returned from getStaticProps, getServerSideProps, or getInitialProps to only the essential data to render the page.

由于只需要 name 和 population，我们可以创建一个仅具有这两个属性的新数据集。这也应该消除警告。

export const getStaticProps = async () => {
  const res = await fetch("https://restcountries.com/v3.1/region/asia");
  const countries = await res.json();
  const countriesWithNamePopulation = countries.map((country) => ({
    name: country.name.common,
    population: country.population
  }));
  return {
    props: {
      countries: countriesWithNamePopulation
    }
  };
};

countries.map 需要 return 语句

{countries.map((country) => {
        return (
          <div>
            <div>{country.name}</div>
            <div>{country.population}</div>
          </div>
        );
      })}

从 API 获取的数据不会填充 NextJS 中的 table

The data fetched from an API doesn't populate the table in NextJS

javascript

api

reactjs

next.js