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

Posted 2023-03-08

【中文标题】如何从 API 声明数组来代替硬编码数组？

【英文标题】：How to declare array from API in place of hardcoded array?

【发布时间】：2021-03-14 22:58:45

【问题描述】：

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

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

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

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

【参考方案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 后端这样设置，它们都将是一个数组。

【讨论】：

感谢您的回复！我已经更新了我的代码并设法让我的数组显示在控制台日志中 - imgur.com/a/cn4gD7F 我现在收到一个错误“TypeError：无法读取未定义的属性'节点'”你知道怎么回事吗？我已经用代码更新了我的 codepen - codesandbox.io/s/quiet-wind-brq8s?file=/src/App.js

查询是否在localhost:8000/___graphql 中工作？ data 是否返回值？

是的 - imgur.com/a/W34uBhY 在代码中，我必须将“数据”更改为项目才能让任何内容出现在控制台日志中

原来 id 重命名了数据到其他地方的项目，哎呀！感谢您的帮助