尝试从 nextjs 中的 api 提取数据时出现未定义的引用错误

Question

我正在尝试使用在https://fakestoreapi.com/上找到的假 api 将数据获取到我的 Next js 应用程序中。 但是我不断收到未定义的引用错误，即使我从官方的 next js 文档中获得了代码片段。 这是我的代码

import { Box, Heading } from "@chakra-ui/react";

export async function getStaticProps() {
  const response = await fetch("https://fakestoreapi.com/products");
  const data = await response.json();

  return {
    props: {
      products,
    },
  };
}

function ProductList() {
  return (
    <Box>
      {products.map((product) => (
        <Box>
          <Text> {product.title} </Text>
        </Box>
      ))}
    </Box>
  );
}

export default ProductList;

这是我不断收到的错误

ReferenceError: products is not defined

Answer 1

尝试这个：

function ProductList({products}) {
  return (
    <Box>
      {products.map((product) => (
        <Box>
          <Text> {product.title} </Text>
        </Box>
      ))}
    </Box>
  );
}