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

这是Javascript解构功能...

 let test = [{name : 'sathish'},{name : 'steve'}];

 //here you are access directly with destructuring es6 feture
 test.map(({name})=>{console.log(name)}

 test.map((fullObj)=>{console.log(fullObj.name)})

Refere this -> js destructuring...

Answer 2

这是对象分解和属性简写功能。
1.) What will happen when using curly braces.。
->在边缘列表上使用map进行迭代时，您会在map函数中获得边缘对象，同时明确提到要从边缘对象中破坏节点属性。

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

2.) What will happen when curly braces not use。
->当您遍历边缘列表上的地图时，您将获得边缘对象作为函数内的参数。在这种情况下，您必须显式访问节点属性。

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

参考：Destructing Feature 希望这样可以清除您的疑问。

Answer 3

如果我很好理解，那么您不知道为什么节点周围需要花括号。 这是一种称为destructuring的es6语法。当function参数具有属性时，您可以通过这种方式提取该属性。

({ node }) => ( <div key={node.id}> // you can use the node here

等同于。

(data) => ( <div key={data.node.id}> // you must use the property thought the parameter

您可以在此处了解更多信息：http://es6-features.org/#ObjectMatchingShorthandNotation

带有Graphql，React的Map函数

3 个答案: