如何在gatsby/react中获取JSON-File的子节点

Question

我想基于 gatsby 框架创建 Azure Static Web App。我对 gatsby/react/javascript 开发很陌生。

我在 gatsby-node.js 文件中通过 axios 创建了一个 GET 请求。

const getBlogs = endpoint => axios.get(`https://example.com/data-api/rest/blogs${endpoint}`);

 const getBlogsData = ids =>
  Promise.all(
    ids.map(async id => {
      const { data: blogs } = await getBlogs(`/glogs/${id}`);
      return { ...blogs };
    })
  );

 exports.createPages = async ({ actions: { createPage } }) => {
    const allBlogs = await getBlogsData(['1', '2', '3', '4']);

我对 allBlogs 对象的响应如下所示：

[
  { value: [ [Object] ] },
  { value: [ [Object] ] },
  { value: [ [Object] ] },
  { value: [ [Object] ] }
]

最后我想解析一个包含结果/数据的数组到我的 gatsby 组件 我的盖茨比组件看起来像：

const ListBlogsComp = ({ pageContext: { allRezepte } }) => {
   return (
    <div style={{ width: 960, margin: '4rem auto' }}>
    <h1>ListBlogsComp</h1>
    {allBlogs.map(blog=> (
        <li key={blog.id}>
          <h2>{blog.id}</h2>
          <p>{glog.name}</p>
        </li>
      ))}
  </div>

  );
}

我如何访问数据？ 如何删除“值”节点以显示组件/html 文件中的真实数据？

我试图找到一个像“值”这样的函数。我是否必须将变量转换为其他数据类型然后解析它？

Answer 1

您可以重新映射数据结构并删除额外的“value”键，您可以使用映射函数来转换 gatsby-node.js 文件中的数据，然后再将其传递给组件。

exports.createPages = async ({ actions: { createPage } }) => {
  const allBlogsData = await getBlogsData(['1', '2', '3', '4']);

  // Remap the data structure
  const allBlogs = allBlogsData.map(blog => blog.value[0]);//also i think i am seeing 2 array there so it might be blog.value[0][0]

Answer 2

我将代码片段添加到我的 gatsby-config.js 文件中。在“gatsby开发”中，整个代码可以工作，在我部署的Azure静态Web应用程序中，它返回以下错误消息：

错误“gatsby-node.js”在运行 createPages 生命周期时抛出错误：请求失败，状态代码为 500