Функция карты с Graphql, React
Я пишу небольшое приложение для блога с Gatsby (React и Graphql). Есть маленькая вещь, которую я не совсем понимаю. Вот код страницы моего блога:
const Blog = ({ data }) => {
console.info(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, так почему мы должны снова указывать, что это динамически сгенерированный контент? Это что-то с графом?
Было бы здорово узнать ответ, заранее спасибо.
Ответы 3
Это функция деструктурирования Javascript...
let test = [{name : 'sathish'},{name : 'steve'}];
//here you are access directly with destructuring es6 feture
test.map(({name})=>{console.info(name)}
test.map((fullObj)=>{console.info(fullObj.name)})
Это функция деструктуризации объектов и сокращения свойств.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>
))}
Ссылка: Разрушение объекта Надеюсь, это рассеет ваши сомнения..
Если я хорошо понимаю, то вы не знаете, зачем нужны фигурные скобки вокруг узла. Это синтаксис 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
Спасибо! А к другим ответам, большое спасибо за вашу помощь :)