Question

我正在使用nextJs，并且有1页-index.js，还有一个我要导入到index.js的名为Products的组件。产品包含对我从中获取数据的graphql端点的请求。

我在Cannot read property 'map' of undefined上收到错误f products.map，因为我认为它没有执行获取请求。

在Products中安装了index.js组件后如何执行请求？

（如果我直接粘贴到Products文件中，则index.js中的代码将起作用）

index.js

import Link from 'next/link';
import Products from '../components/Products'

const Layout = () => {
  return(
    <div>
      <Products />
    </div>
  )
}

export default Layout

products.js

import Link from "next/link";
import { GraphQLClient } from "graphql-request";

export async function getStaticProps() {
  const graphcms = new GraphQLClient(
    "https://api-eu-central-1.graphcms.com/v2/ckbmb39xb04eo01wh7yc80q8m/master"
  );

  const { products } = await graphcms.request(
    `
      { 
        products {
          slug
          name
        }
      }
    `
  );

  return {
    props: {
      products
    }
  };
}

export default ({ products }) => 
  products.map(({ slug, name }) => (
    <Link key={slug} href={`/products/${slug}`}>
      <a>{name}</a>
    </Link>
  ));

Answer 1

getStaticPath只能从页面i.e index.js调用，因此您需要将export getStaticProps移到index.js并将产品作为道具传递给products.js组件。 / p>

或者，如果您想在客户端上获取数据，则可以使用产品组件中的useEffect钩子

nextjs安装的组件未获取数据

1 个答案: