Javascript Gatsby JS显示CSV生成的页面中的数据

我从盖茨比JS中的csv文件创建页面。到现在为止，一直都还不错。当试图将数据输出到这些生成的页面上时，有些东西总是未定义的，我就是不知道如何让它工作

通过降价或其他渠道，我让它工作得很好，但不知怎的，我被困在这里了。我尝试修改各种其他博客模板以获取我的数据，但没有效果：/

这是我在模板中得到的：

import React from "react"

class ProductTemplate extends React.Component {
  render() {
        const data = this.props.productsCsv
    return (
      <div>
        <h1>{data.name}</h1>
      </div>
    )
  }
}

export default ProductTemplate


export const SingleProductQuery = graphql`
   query ProductByPath($slug: String!) {
      productsCsv(slug: {eq: $slug}) {
            name
            price
            image
          }
        }
`;

从“React”导入React
类ProductTemplate扩展了React.Component{
render（）{
const data=this.props.productsCsv
返回(
{data.name}
)
}
}
导出默认产品模板
导出常量SingleProductQuery=graphql`
查询ProductByPath（$slug:String！）{
productsCsv（slug:{eq:$slug}）{
名称
价格
形象
}
}
`;

任何想法或建议都将不胜感激：）

似乎我忘记了渲染函数中的“数据”。现在工作很好。以防有人有同样的问题，这里是我使用的代码：

import React from 'react';

class ProductTemplate extends React.Component {
    render() {
        const post = this.props.data.productsCsv
  return (
        <div>
        <h1>{post.name}</h1>
        <img src={post.image} />
        </div>
  );
}
};

export default ProductTemplate;

export const singleQuery = graphql`
   query ProductBySlug($slug: String!) {
      productsCsv( slug: { eq: $slug }) {
            name
            price
            image
          }
        }
`;

从“React”导入React；
类ProductTemplate扩展了React.Component{
render（）{
const post=this.props.data.productsCsv
返回(
{post.name}
);
}
};
导出默认产品模板；
export const singleQuery=graphql`
查询ProductBySlug（$slug:String！）{
productsCsv（slug:{eq:$slug}）{
名称
价格
形象
}
}
`;