Question

我正在从Gatsby JS中的csv文件创建页面。到目前为止，一切都很好。当试图将数据输出到那些生成的页面上时，总是存在一些不确定的东西，而我只是想不通如何使其工作。

使用markdown或其他来源，我可以使它正常工作，但不知何故我被困在这里。我尝试修改所有其他博客模板以获取数据，但无济于事：/

这是我在模板中得到的：

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
          }
        }
`;

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

Answer 1

似乎我在渲染函数中忘记了“数据”。现在工作正常。万一有人遇到相同的问题，在这里我可以使用的代码：

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
          }
        }
`;

Gatsby JS显示CSV

1 个答案: