reactjs - 使用 Graphql、React 的映射函数

Question

我正在使用 Gatsby(React 和 Graphql)编写一个小型博客应用程序。有一件小事我不太明白。这是我的博客页面代码:

const Blog = ({ data }) => {
  console.log(data)
  return (
  <Layout>
    <h1>Blog</h1>
    {data.allMarkdownRemark.edges.map(({ node }) => (
      <div key={node.id}>
        <h3>{node.frontmatter.title}</h3>
      </div>
    ))}
  </Layout>)
}

export default props => (
<StaticQuery
      query={graphql`
        query {
  allMarkdownRemark {
    totalCount
    edges {
      node {
        id
        frontmatter {
          title
          path
          date
          tags
        }
      }
    }
  }
}
      `}
      render={ data => <Blog data={data} {...props} />} 
    />
)

令我感到困惑的是这一行:

{data.allMarkdownRemark.edges.map(({ node }) => (

我的问题是，为什么会返回错误:

{data.allMarkdownRemark.edges.map( node  => (

为什么需要大括号？混淆来自于我们已经从 markdownremark.edges 接收列表的事实，那么为什么我们必须再次指定它是动态生成的内容？是 graphql 的东西吗？

如果知道答案就太好了，提前致谢。

Answer 1

这是对象解构和属性速记功能。
1.) 使用花括号时会发生什么。。
-> 当您在边缘列表上使用 map 进行迭代时，您会在 map 函数中获得边缘对象，同时您明确提到要从边缘对象中破坏节点属性。

 {data.allMarkdownRemark.edges.map(({ node }) => (
      <div key={node.id}>
        <h3>{node.frontmatter.title}</h3>
      </div>
    ))}

2.) 不使用花括号会发生什么。
-> 当您遍历边缘列表上的 map 时，您将获得边缘对象作为函数内部的参数。在这种情况下，您必须显式访问节点属性。

 {data.allMarkdownRemark.edges.map( edge  => (
      <div key={edge.node.id}>
        <h3>{edge.node.frontmatter.title}</h3>
      </div>
    ))}

引用:Destructing Feature希望它能消除您的疑虑..