Next.js nextjs安装的组件未获取数据

我正在使用nextJs，有一个页面-

index.js

，还有一个组件，我正在导入到

index.js

中，名为

产品

。产品包含对我从中获取数据的graphql端点的请求

我得到错误f

无法读取
产品上未定义的
属性的“map”。map
因为我认为它没有执行提取请求

当
Products
组件安装在
index.js
中时，如何执行请求

（如果我直接粘贴到
index.js
文件中，
Products
中的代码可以工作）

index.js

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

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

export default Layout

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>
  ));

从“下一个/链接”导入链接；
从“../components/Products”导入产品
常量布局=（）=>{
返回(
)
}
导出默认布局

products.js

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

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

export default Layout

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>
  ));

从“下一个/链接”导入链接；
从“graphql请求”导入{GraphQLClient}；
导出异步函数getStaticProps（）{
const graphcms=新的GraphQLClient(
"https://api-eu-central-1.graphcms.com/v2/ckbmb39xb04eo01wh7yc80q8m/master"
);
const{products}=wait graphcms.request(
`
{ 
产品{
鼻涕虫
名称
}
}
`
);
返回{
道具：{
产品
}
};
}
导出默认值（{products}）=>
products.map（{slug，name}）=>(
{name}
));
只能从页面
即index.js
调用，因此您需要将
导出getStaticProps
移动到index.js，并将产品作为道具传递到
产品.js
组件

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