data.site.siteMetadata.description 缺少道具验证 - gatsby 和 graphQl

Question

我正在尝试从 graphql 查询中呈现站点的元数据，该查询在 graphql 操场上运行良好，但我什至无法 console.log 数据，当我尝试将其注销时，它给了我一个整数安慰？ 因此，我只是尝试使用 gatsby 文档在屏幕上呈现它并收到此错误：32:41 error 'data.site.siteMetadata.description' is missing in props validation

const IndexPage = ({ data }) => {
  return (
    <Layout>
      <SEO
        keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
        title="Home"
      />
      <div className="container mx-auto flex flex-col md:flex-row items-center">
        <div className="flex flex-col w-full lg:w-1/2 justify-center items-start pt-12 pb-24 lg:-px-12">
          <h3
            style={{ fontFamily: "Permanent Marker" }}
            className="text-4xl py-2 lg:-mx-32 font-title"
          >
            Meet the world’s only dedicated analytic platform for active
            nutrition.
          </h3>
          <h4
            style={{ fontFamily: "Montserrat" }}
            className="text-2xl py-10 lg:relative right-32"
          >
            Nutrition Integrated supplies companies with the data, tools and
            insights to understand the moving landscape and make smarter
            decisions.
          </h4>
        </div>
        <div className="w-full lg:w-hero lg:py-6 text-center lg:-mr-12 relative lg:left-24">
          <img
            className="fill-current text-black  "
            src={image}
            alt="image"
          ></img>
        </div>
        <h2> {data.site.siteMetadata.description}</h2>
      </div>
    </Layout>
  );
};

export const query = graphql`
  query MyQuery {
    allContentfulLandingPage {
edges {
  node {
    heroTitle {
      heroTitle
    }
    heroBody {
      raw
    }
  }  
}
  }
  }
`;

export default IndexPage;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

出现此消息是因为您正在使用 PropTypes 来验证您的 props 类型。基本上，它是对您正在钻取的数据类型的验证props，从而增强了代码的凝聚力。

例如，如果您在某处期望布尔值，则属性的类型将是布尔值。如果以后您或任何队友将其更改为字符串，则验证将失败，因为未定义类型。一般会在浏览器的控制台中提示问题。在您的情况下，因为您没有定义类型，所以它失败了。

结构如下：

import PropTypes from 'prop-types';

const YourComponent = ({ name })=> {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
}

YourComponent.propTypes = {
  name: PropTypes.string
};

也就是说，你可以：

• 删除PropType 验证：只需删除导入：

  import PropTypes from 'prop-types';
  

• 提供道具验证：添加data的形状类型。因为data 是一个对象，所以它比前面的例子稍微复杂一点，但它应该看起来像：

  YourComponent.propTypes = {
        data: PropTypes.shape({
          site: PropTypes.shape({
            siteMetadata: PropTypes.shape({
              description: PropTypes.string.isRequired,
            }).isRequired,
          }).isRequired,
        }).isRequired,
      }; 
  

  根据您的情况，您可能需要删除 isRequired 属性。

给定：

export const query = graphql`
  query MyQuery {
    allContentfulLandingPage {
      edges {
        node {
          heroTitle {
            heroTitle
          }
          heroBody {
            raw
          }
        }  
      }
    }
  }
`;

PropTypes 应如下所示：

   IndexPage.propTypes = {
        data: PropTypes.shape({
          edges: PropTypes.shape({
            node: PropTypes.arrayOf(PropTypes.object)
          }).isRequired,
        }).isRequired,
      }; 

我不确定你在raw 中得到了什么，所以我已经包裹在PropTypes.arrayOf(PropTypes.object) 中。 Check the types 并相应地更改它们。