时间戳

首页 > 解决方案 > 如何从 API 声明数组来代替硬编码数组？

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

问题描述

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

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

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

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

标签： javascriptarraysreactjsgraphqlgatsby

解决方案

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

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 提供的 hook 或者添加页面查询（我的做法）。

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

推荐阅读