如何制作一个列表组件来列出我内容丰富的帖子答案

【问题标题】：How to make a list component to list my contentful posts如何制作一个列表组件来列出我内容丰富的帖子
【发布时间】：2019-04-02 12:04:28
【问题描述】：

我正在尝试制作一个列表组件，列出来自我的 Contentful 帐户的项目案例研究。我正在尝试使用 Gatsby 的静态查询组件。

我尝试将数据引入并将其映射到列表项组件，该组件基本上将 Title 和 URL 作为 props 放入 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

我希望获得指向我的案例研究的可点击链接列表。相反，我得到一个带有空链接的空列表项列表

【问题讨论】：

标签： reactjs gatsby contentful

【解决方案1】：

由于边缘的形状像这样[{ 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 => ...)一样更容易访问它

【讨论】：