如何显示来自 graphql 查询 Gatsbyjs 的数据？答案

【问题标题】：how to display data from graphql query Gatsbyjs?如何显示来自 graphql 查询 Gatsbyjs 的数据？
【发布时间】：2022-01-12 17:51:04
【问题描述】：

我需要一些帮助。我正在使用 Gatsbyjs 并且内容丰富。我已经使用graphql查询了数据。我可以看到该对象，但似乎无法在 div 中显示它。我在这里想念什么？错误一直说无法读取地图的未定义属性。还有另一种方法吗？内容包括文本、图像和mp3。让我知道我在这里缺少什么。

这是代码

const IndexPage = ({data}) => {
  
  console.log(data);
  
  return (
    <div>
    {data.edges.map(edge => <p key={edge} >{edge}</p>)}
    </div>
      )
}

export const query = graphql `
query MyQuery {
  allContentfulPodcast {
    edges {
      node {
        title
        thumbnail {
          file {
            details {
              image {
                height
                width
              }
              size
            }
            fileName
            url
          }
        }
        video {
          file {
            fileName
            url
          }
        }
      }
    }
  }
}

控制台日志对象

{
    "allContentfulPodcast": {
        "edges": [
            {
                "node": {
                    "title": "Welcome to our show",
                    "thumbnail": {
                        "file": {
                            "details": {
                                "image": {
                                    "height": 5304,
                                    "width": 7952
                                },
                                "size": 4752704
                            },
                            "fileName": "business.jpg",
                            "url": "//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg"
                        }
                    },
                    "video": {
                        "file": {
                            "fileName": "watch",
                            "url": "//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch"
                        }
                    }
                }
            }
        ]
    }
}

【问题讨论】：

能否发布console.log(data)结果
刚刚添加

标签： reactjs graphql gatsby contentful

【解决方案1】：

您必须将一些值传递给<p> 标签而不是整个对象。例如：

<div>
  {data.allContentfulPodcast.edges.map((edge, index) => <p key={index}>{edge.node.title}</p>)}
</div>

【讨论】：

之前尝试过 - 同样的问题“无法读取未定义的属性（读取 'map'）”
@shar27 刚刚编辑。我忘了allContentfulPodcast
是的，这是正确的。我忘记了node.title。谢谢你。查询图像和音频会不会类似？
是的。但您必须提供正确的标签，而不是 <p> 标签。

【解决方案2】：

您缺少另一个级别的对象：“无法读取地图的未定义属性”您应该尝试：

  return (
    <div>
      {data.allContentfulPodcast.edges.map(edge => <p key={edge.node.title} >{edge}</p>)}
    </div>
    )

【讨论】：

之前也试过，它给了我这个 Objects are not valid as a React child (found: object with keys {node})。如果您打算渲染一组子项，请改用数组。
已更新，另一个级别的问题 - 您要呈现的字段必须是一个值而不是一个对象，因此请在 p 标签中更改为 edge.node.title