我对呈现来自graphCMS的内容，特别是类别有一个问题。

Question

学习如何使用nextjs和graphCMS构建博客，能够使用gql查询获得一些内容，但由于无法理解的原因，我似乎无法将categories.name内容呈现到站点上，而且没有错误。我想知道问题是什么，因为在此之前，我遇到了一个电子商务项目的sanity.io平台。

从“react”导入React，{ useState，useEffect }

从“next/ Link”导入链接

从‘./services’导入{ getCategories }

const类别= () => {

const范畴，setCategories = useState([])；

useEffect(() ) => {

getCategories()

    .then((newCategories) => setCategories(newCategories))

}，[])；

返回(

<div className='bg-white shadow-lg rounded-lg p-8 mb-12'>

  <h3 className='text-xl mb-8 font-semibold border-b pb-4'>

    Categories

  </h3>

  {categories.map((category) => {

    <Link key={category.slug} href={`/category/${category.slug}`}>

      <span className='cursor-pointer block pb-3 mb-3'>

        {category.name}

      </span>

    </Link>

  })}

</div>

下面是用于设置呈现站点上需要显示的内容的过程的查询

导出const getCategories = => {

const query = gql`

    query GetCategories {

        categories {

            name

            slug

        }

    }

`

const result = await request(graphqlAPI, query);

return result.categories;

}

Answer 1

假设您正在获取数据并且状态是正确的，则在您的return中缺少map

{categories.map((category) => {

 // notice this return keyword!!
   return <Link key={category.slug} href={`/category/${category.slug}`}>

      <span className='cursor-pointer block pb-3 mb-3'>

        {category.name}

      </span>

    </Link>

  })}

Answer 2

计算出来后，必须在.map元素和=>之后更改{}到()