如何从 API 声明数组来代替硬编码数组？

Question

我得到了一个包含硬编码数组的代码示例。我希望将它换成我的数组，该数组是使用 graphql 从 API 中提取的。下面是原始示例的代码笔和另一个我尝试过但无济于事的代码。

我对 graphql 和 js 很陌生，所以很可能是一个业余错误，任何指针都将不胜感激！

原始代码-https://codesandbox.io/s/nice-saha-gwbwv

我的笔 - https://codesandbox.io/s/quiet-wind-brq8s?file=/src/App.js

Answer 1

我会将您的组件结构更改为：

import React, { useState } from 'react'
import { graphql } from 'gatsby'

 const YourPage = ({data}) => {
   console.log('data is', data)
   const [filters, setFilters] = useState({
    type: "",
    category: ""
  });

//your calculations

  return (
    <div>
      Your stuff 
    </div>
  )
}

export const query = graphql`
  query yourQueryName{
      allStrapiHomes {
        nodes {
          type
          category
        }
      }
  }
`

export default YourPage

在您的代码中，在一些关键的导入时，您会遗漏一些来自 Gatsby 的东西。如果您使用staticQuery，则需要为其添加渲染模式。可能看起来有点老土，最好使用 Gatsby 提供的useStaticQuery 钩子或者添加页面查询（我的做法）。

我添加了page query。您的数据位于props.data.allStrapiHomes.nodes 下，解构道具省略了第一步，因此您的数据将位于data.allStrapiHomes.nodes。如果 type 和 category 在 Strapi 后端这样设置，它们都将是一个数组。