我想做什么：

我有一个名为 blog.js 的 Gatsby 页面，在这个页面中，我一直在显示通过 GraphQL 检索到的博客标题。直接在 blog.js 页面中使用循环，我可以看到所有标题。

我在 blog.js 中的循环如下所示

<div> 
            <h1>Blogg data</h1>
            {data.posts.edges.map (({ node }) => (
                <p>{node.title}</p>
            ))}
        </div>

它从以下 GraphQL 查询中检索数据

export const query = graphql`
  query BlogPageQuery {
    posts: allSanityPost(
      limit: 12
      sort: { fields: [publishedAt], order: DESC }
    ) {
      edges {
        node {
          id
          publishedAt
          mainImage {
            asset {
              _id
            }
            alt
          }
          title
          _rawExcerpt
          slug {
            current
          }
        }
      }
    }
  }
`

我不想在 blog.js 中创建博客文章预览，而是想使用组件来执行此操作。我已经创建了一个名为 BlogPostPreviewGrid 的组件并从 blog.js 中像这样调用它

<BlogPostPreviewGrid blogPosts={data}/>

我的 BlogPostPreviewGrid 组件当前看起来像这样

const BlogPostPreviewGrid = blogPosts => {
    return (
    <div>   
     <p>Here be component data</p>

  {console.log(blogPosts)}
     {blogPosts.posts.edges.map (({ node }) => (
                <p>{node.title}</p>
            ))}
    </div>
    )

}
export default BlogPostPreviewGrid

什么不起作用：

我无法循环遍历组件检索到的数据，运行循环时我收到一个控制台错误消息，指出 blogPostPreviewGrid.js:13 Uncaught TypeError: Cannot read property 'edges' of undefined

我尝试过什么：

我的第一个响应是 console.log blogPosts，console.log 显示数组对象，我已经从 Chromes 控制台日志附加了一个数组

blogPostPreviewGrid.js:13 {blogPosts: {…}}blogPosts: posts: edges: Array(2)0: node: {id: "54fe241a-c7d4-50d2-be51-4403304ddc86", publishedAt: "2020-01-05T23:00:00.000Z", mainImage: {…}, title: "Testpost2", _rawExcerpt: Array(1), …}__proto__: Object1: {node: {…}}length:

我还编写了一个条件语句，以便组件仅在 blogPosts 中存在某些内容时才尝试呈现数据，并尝试调整循环。我最终执行了 git reset --hard，因此现在不存在条件渲染。

感谢大家的回复！

Answer 1

在 React 中传递给子组件的值通过一个称为 props 的大对象传递： https://reactjs.org/docs/components-and-props.html 。

因此，您需要在函数调用中解构 props：

const BlogPostPreviewGrid = ({blogPosts}) => {
    // do stuff
    console.log(blogPosts)
}

或者使用 props 对象

const BlogPostPreviewGrid = props => {
    // do stuff using blogPosts 
    console.log(props.blogPosts);
}

如果您的组件看起来像这样 <Foo prop1={prop1} prop2={prop2} /> ，那么您可以像这样访问它：

const Foo = props => {
    console.log(props.prop1);
    console.log(props.prop2);
}

或者像这样：

const Foo = ({ prop1, prop2 }) => {
    console.log(prop1);
    console.log(prop2);
}

Answer 2

这应该可以工作：

BlogPostPreviewGrid.jsx

const BlogPostPreviewGrid = ({blogPosts}) => {
    return (
      <div>
         {blogPosts.posts.edges.map (({ node }) => (
            <p>{node.title}</p>
         ))}
      </div>
    )

}
export default BlogPostPreviewGrid