如何从 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