Question

我正在尝试创建一个列表组件，该列表组件列出了来自我的Contentful帐户的项目案例研究。我正在尝试使用盖茨比的静态查询组件。

我试图引入数据并将其映射到列表项组件，该组件基本上以标题和URL作为道具进入链接组件，如下所示：

<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

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

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

一样轻松访问

如何制作列表组件以列出我的内容帖子

1 个答案: