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

【问题标题】：Can't loop array passed to component无法循环传递给组件的数组
【发布时间】：2020-04-26 22:51:45
【问题描述】：

亲爱的 Stack Overflow，您好，我刚刚创建了一个 Gatsby 网站，但在循环传递给组件的数组时遇到了问题。

我想要做什么：

我有一个名为 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 显示了数组对象，我从 Chrome 控制台日志中附加了一个数组

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 所以条件渲染现在不存在。

感谢大家的回复！

【问题讨论】：

graphq 使用什么库？它可能有一些 API 仅在加载数据后才呈现组件。无论如何，条件渲染应该有所帮助，您可能在条件中犯了错误。

标签： javascript arrays reactjs gatsby

【解决方案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);
}

【讨论】：

【解决方案2】：

这应该可行：

BlogPostPreviewGrid.jsx

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

}
export default BlogPostPreviewGrid

【讨论】：