如何从 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 的一些内容。如果您使用 a staticQuery，则需要为其添加渲染模式。可能看起来有点老套，最好使用useStaticQueryGatsby 提供的钩子或者添加页面查询（我的方法）。我添加了页面查询。您的数据位于props.data.allStrapiHomes.nodes，解构道具您省略了第一步，因此您的数据将位于data.allStrapiHomes.nodes。如果在 Strapi 后端中这样设置，则和type都将是一个数组。category