2
votes

Fonction de carte avec Graphql, React

J'écris une petite application de blog avec Gatsby (React et Graphql). Il y a une petite chose que je ne comprends pas très bien. Voici le code de ma page de blog:

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

Ce qui me trouble, c'est cette ligne:

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

ma question est, pourquoi renvoie une erreur:

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

Pourquoi les accolades sont-elles nécessaires? La confusion vient du fait que nous recevons déjà la liste de markdownremark.edges, alors pourquoi devons-nous spécifier à nouveau qu'il s'agit d'un contenu généré dynamiquement? Est-ce une chose graphql?

Ce serait formidable de connaître la réponse, merci d'avance.

reactjs graphql gatsby

0 commentaires

3 Réponses :

0
votes

Il s'agit de la fonction de destruction 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)})

Référez-vous à ceci -> js destructuring ...

0 commentaires

1
votes

Il s'agit de la fonction de destruction d'objets et de raccourcis de propriété.
1.) Que se passe-t-il lors de l'utilisation d'accolades? .
-> lorsque vous itérez en utilisant la carte sur la liste des bords, vous obtenez l'objet de bord dans votre fonction de carte, en même temps vous avez explicitement mentionné de détruire la propriété de nœud de l'objet de bord.

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

2.) Que se passe-t-il lorsque les accolades n'utilisent pas .
-> lorsque vous parcourez la carte sur la liste des bords, vous obtiendrez un objet de bord en tant que paramètre à l'intérieur de la fonction. dans ce cas, vous devez accéder explicitement à la propriété du nœud.

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

Réf: Fonction de destruction J'espère que cela dissipera votre doute ..

1 commentaires

Merci! Et aux autres réponses, merci beaucoup pour votre aide :)

0
votes

Si je comprends bien, alors vous ne savez pas pourquoi des accolades sont nécessaires autour du nœud. Il s'agit d'une syntaxe es6 appelée déstructuration . Lorsque le paramètre de fonction a une propriété, vous pouvez extraire cette propriété de cette manière.

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

C'est équivalent à.

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

Vous pouvez lire plus à ce sujet ici: http://es6-features.org/#ObjectMatchingShorthandNotation

0 commentaires