无法循环传递给组件的数组

Question

你好，亲爱的堆栈溢出，我刚刚启动了一个盖茨比网站，但我有通过传递给组件的数组循环的问题。

我有一个叫博客的盖茨比网页。js，在这个页面中，我展示了通过GraphQL检索到的博客标题。直接在博客中使用循环。我可以看到所有的标题。

我的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
          }
        }
      }
    }
  }
`

而不是在博客中创建博客帖子预览。相反，我想使用一个组件来实现这一点。我创建了一个名为BlogPostReviewGrid的组件，并从blog中这样调用它。js

<BlogPostPreviewGrid blogPosts={data}/>

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

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未捕获的类型错误：无法读取未定义的属性'边缘'

我的第一反应是安慰。日志日志、博客帖子、控制台。日志显示了数组对象，我从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: 

我还编写了一个条件语句，以便组件仅在blogpost中存在某些内容时尝试呈现数据，并尝试调整循环。我最后做了一个git重置——很难，所以条件渲染现在不存在。

谢谢大家的回复！

Answer 1

这应该行得通：

BlogPostReviewGrid。jsx

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

}
export default BlogPostPreviewGrid

Answer 2

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

因此，您需要在函数调用中分解道具：

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

或者使用道具对象

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

如果您的组件看起来像这样

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

或者像这样：

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