Gatsby组件接收数组后无法遍历的问题求助

嘿，我一眼就看出问题所在了——你的组件接收props的方式不对！

核心问题 #

当你在父组件里调用 <BlogPostPreviewGrid blogPosts={data}/> 时，React会把所有传入的属性打包成一个props对象传给子组件。你现在的组件代码里，const BlogPostPreviewGrid = blogPosts => {...} 中的 blogPosts 其实是整个props对象，而不是你传入的data值。这就导致你尝试访问blogPosts.posts.edges时，实际上是在访问props.posts——这当然不存在，所以才会报错Cannot read property 'edges' of undefined。

从你console.log的结果{blogPosts: {…}}也能验证这一点：这个对象里的blogPosts属性才是真正包含posts.edges的数据源。

解决方案 #

有两种简单的修复方式，选哪种都可以：

方式1：解构props参数

直接在组件参数里解构出blogPosts属性，这样就能直接使用它：

const BlogPostPreviewGrid = ({ blogPosts }) => {
  return (
    <div>
      <p>Here be component data</p>
      {/* 用可选链操作符?.防止数据未加载时的报错 */}
      {blogPosts?.posts?.edges.map(({ node }) => (
        {/* 别忘了给map的元素加唯一key，这是React的要求 */}
        <p key={node.id}>{node.title}</p>
      ))}
    </div>
  )
}
export default BlogPostPreviewGrid

方式2：通过props对象访问属性

如果你不想解构，也可以直接通过props对象访问blogPosts属性：

const BlogPostPreviewGrid = props => {
  return (
    <div>
      <p>Here be component data</p>
      {props.blogPosts?.posts?.edges.map(({ node }) => (
        <p key={node.id}>{node.title}</p>
      ))}
    </div>
  )
}
export default BlogPostPreviewGrid

额外优化建议 #

我还加了两个小细节：

1. 可选链操作符?.：防止组件在数据还没加载完成时（比如Gatsby的静态生成阶段）出现空值报错，让代码更健壮。
2. 唯一key：React要求列表中的每个元素都要有唯一的key属性，用node.id正好符合要求，避免控制台警告。

内容的提问来源于stack exchange，提问作者Andreas