如何制作一个列表组件来列出我的内容

Question

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

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

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

Answer 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 => ...)

一样更容易访问它

如何制作一个列表组件来列出我的内容

How to make a list component to list my contentful posts

reactjs

contentful

gatsby