Функция карты с 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, так почему мы должны указывать, что это снова динамически генерируемый контент?Это что-то вроде графика?

Было бы здорово узнать ответ, заранее спасибо.

Answer 1

Это функция разрушения объектов и сокращения свойств.
1.) What will happen when using curly braces..
-> когда вы выполняете итерацию, используя карту по списку ребер, вы получаете объект ребра в функции карты, в то же время вы явно упоминаетечтобы уничтожить свойство узла из объекта ребра.

 {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>
    ))}

Ссылка: Уничтожение объекта Надеюсь, что это очистит ваше сомнение ..

Answer 2

Если я хорошо понимаю, то вы не знаете, зачем нужны фигурные скобки вокруг узла. Это синтаксис es6, называемый деструктуризацией .Когда у параметра функции есть свойство, вы можете извлечь это свойство следующим образом.

({ 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

Answer 3

Это функция разрушения 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)})

Ссылка на это -> JS destruuring ...