Как составить список для составления списка моих содержательных постов - PullRequest
Новая
       12

Как составить список для составления списка моих содержательных постов

2 голосов
/ 02 апреля 2019

Я пытаюсь создать компонент списка, в котором перечислены примеры из моего проекта, полученные из моей учетной записи Contentful.Я пытаюсь использовать компонент статического запроса Гэтсби.

Я пытался перенести данные и сопоставить их с компонентом элемента списка, который в основном использует заголовок и URL-адрес в качестве реквизитов для компонента Link, как показано ниже: 

<li><Link to={this.props.url} >{this.props.title}</Link></li>

Вот что у меня есть: (не обращайте внимания на орфографические ошибки в caseStudyTitile ...) 

import React from 'react'
import CaseItem from './caseItem/caseItem';

import { StaticQuery } from 'gatsby';

const Cases = () => (
    <StaticQuery
        query={graphql`
        query CaseStudyQuery {
            allContentfulCaseStudy {
                edges {
                    node {
                        caseStudyTitile
                        slug
                    }
                }
            }
        }
        `}
        render={data => (
            <div className="Cases">
                <h3>Case Studies</h3>
                <ul>
                    {data.allContentfulCaseStudy.edges.map(node => (
                        <CaseItem 
                            title={node.caseStudyTitile} 
                            url={node.slug}/>
                    ))}
                </ul>
            </div>
        )}
    />

)

export default Cases

Я ожидаю получить список интерактивных ссылок на мои тематические исследования.Вместо этого я получаю список пустых элементов списка с пустыми ссылками

1 Ответ

1 голос
/ 02 апреля 2019

Поскольку ребра имеют такую ​​форму [{ node: {...} }, { node: {...} }, ...] Вам нужно развернуть узел: 

- data.allContentfulCaseStudy.edges.map(node => (
+ data.allContentfulCaseStudy.edges.map(({ node }) => (

Если вы используете gatsby 2.2.0 и выше, вы можете использовать этот быстрый запрос: 

  query CaseStudyQuery {
    allContentfulCaseStudy {
      nodes {  // <--- short for `edges { node { ... } }`
        caseStudyTitile
        slug
      }
    }
  }

и получить к нему доступ намного проще, как data.allContentfulCaseStudy.nodes.map(node => ...)

...