Javascript 如何从API声明数组而不是硬编码数组？

我得到了一个带有硬编码数组的代码示例。我希望用我的数组替换掉这个，这个数组是使用graphql从API中拉入的。下面是原始示例的代码笔&另一个是我尝试过但没有成功的代码笔

我是graphql&js新手，很可能是个业余爱好者犯的错误，任何指点都将不胜感激

原代码-

---

我的笔-

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

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

import React，{useState}来自“React”
从“盖茨比”导入{graphql}
constyourpage=（{data}）=>{
console.log（'data is'，data）
const[filters，setFilters]=useState({
类型：“，
类别：“”
});
//你的计算
返回(
你的东西
)
}
export const query=graphql`
查询您的QueryName{
奥尔斯特拉皮耶姆斯酒店{
节点{
类型
类别
}
}
}
`
导出默认页面

在你的代码中，在一些关键的导入上，你缺少了一些来自盖茨比的东西。如果使用，则需要向其添加渲染模式。它可能看起来有点过时，最好使用盖茨比提供的钩子或添加页面查询（我的方法）

---

我加了一个。您的数据位于

props.data.allStrapiHomes.nodes

下，解构props忽略了第一步，因此您的数据将位于

data.allStrapiHomes.nodes

。如果在Strapi后端将

类型

和

类别

设置为这样，则它们都将是一个数组。

感谢您的回复！我更新了我的代码，并设法让我的数组显示在控制台日志中-我现在收到一个错误“TypeError:无法读取未定义的”属性“nodes”，你知道这是怎么回事吗？我用代码更新了我的代码笔-查询是否在

localhost:8000/\uuuuuuu graphql

中工作？

data

是否返回一个值？是的-在代码中，我必须将“data”更改为items，以便在控制台日志中显示任何内容，尽管结果表明id将数据重命名为其他位置的items，哎呀！谢谢你的帮助