未处理的运行时错误，Gatsby 中的 Seo 组件

Question

我正在学习在 Gatsby 中制作 Seo 组件，我写的这段代码是从 Gatsby starter 复制的这个方法，但是我有一个问题，显示这个错误有 3 个未处理的运行时错误？

这是我的 Seo 代码

import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const Seo = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social {
              twitter
            }
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

此代码片段下方的另一个问题也无法访问

    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

这里还有我的 index.js 我尝试导入 Seo

import { graphql, Link } from "gatsby"
import React from "react"
import Layout from "../components/Layout"
import * as styles from "../styles/home.module.css"
import { StaticImage } from "gatsby-plugin-image"
import Seo from "../components/Seo"

export default function Home({ data }) {
  const siteTitle = data.site.siteMetadata.title
  const siteDescription = data.site.siteMetadata.description
  return (
    <Layout>
      <Seo title={siteTitle} description={siteDescription} />
      <section className={styles.header}>
        <div className={styles.content}>
          <h2>hello world!</h2>
          <h3>Let's turn some ideas into websites.</h3>
          <p>I'm a Freelancer Web Developer,</p>
          <p>
            Ready to help individual customers or small startups build their
            perfect Website.
          </p>
          <Link to="/projects" className={styles.btn}>
            My Projects
          </Link>
        </div>
        <div className={styles.img}>
          <StaticImage
            src="../images/header1.jpg"
            placeholder="blurred"
            layout="fullWidth"
            alt="Banner"
          />
        </div>
      </section>
    </Layout>
  )
}

export const HomeQuery = graphql`
  query HomeQuery {
    site {
      siteMetadata {
        title
        description
        social {
          twitter
        }
      }
    }
  }
`

这里我也导入了Seo

import React from "react"
import { Link } from "gatsby"
import Seo from "../Seo"
import styled from "styled-components"
import icon from "../../images/svg/logo-icon.svg"

const LogoWrap = styled.div`
  display: flex;
  color: var(--alpha-color);
  align-items: center:
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
  }

  img {
    display: inline;
    margin-right: 3px;
  }
`

const Logo = () => {
  const { title } = Seo()

  return (
    <LogoWrap as={Link} to="/">
      <img src={icon} alt={title} width="40" height="30"></img>
      {title}
    </LogoWrap>
  )
}

export default Logo

我做错了什么需要帮助！？

Answer 1

嗯，相当 self-explanatory。在 Seo 组件中，您将 props 解构为 description、lang、meta 和 title，分别位于：

const Seo = ({ description, lang, meta, title })

照原样，所有字段都被推断为必填字段，因此问题出现了，因为在 Seo 的某些用途中，description 是 null 或 undefined（检查其余部分）。

检查您呈现 Seo 组件的页面，以检查如何向下钻取道具。理想情况下，它应该是：

<Seo description={'Some description'} lang={'Some lang'} ... />

注意：这将根据 props 的传递方式而有所不同。

您可以通过在解构中添加一些默认值来绕过此问题，例如：

const Seo = ({ description = '', lang = '', meta=[], title='' })

添加默认值将使您的 Seo 组件在没有人通过 props 传递时采用它们，避免 code-breaking.

未处理的运行时错误，Gatsby 中的 Seo 组件

Unhandled Runtime Errors, Seo component in Gatsby

gatsby