对Gatsby组件中插件中的数据使用静态查询

Question

我是React和Gatsby的新手。我正在尝试从组件中的gatsby-csv插件中获取数据。我读到，在组件中，您必须使用静态查询来获取数据，但我无法使其工作。我收到"无法读取未定义的属性'props'"，所以我认为我对数据构造函数做了错误的处理，或者可能语法错误。

import React from 'react';
import { StaticQuery, graphql } from "gatsby"
const data = this.props.data.allLettersCsv.edges
export default () => (
<StaticQuery
query={graphql`
query Corrispondences {
allLettersCsv {
edges {
node {
word
value
}
}
}
}
`}
render={data.map((row,i) => (
<div>
<table>
<thead>
<tr>
<th>Letter</th>
<th>ASCII Value</th>
</tr>
</thead>
<tbody>
<tr key={`${row.node.value} ${i}`}>
<td>{row.node.word}</td>
<td>{row.node.value}</td>
</tr>
</tbody>
</table>
</div>
))
}
/>
)

Answer 1

您的代码中有两个问题：

首先，您在组件之外声明数据：

const data = this.props.data.allLettersCsv.edges

模块作用域中可能没有this.props，因此会出现错误。您应该删除这一行，因为gatsby通过StaticQuery的render向您的组件提供graphql查询结果。

其次，StaticQuery的render需要一个函数，它将来自graphql查询的结果作为data(CheckoutReact关于呈现道具的文档)传递。

所以你可以这样重写，例如：

render={data => (
<>
{data.allLettersCsv.edges.map((row,i) => ...)}
</>
)

希望它能有所帮助！