Gatsby：在组件中访问props数组的长度会导致TypeError（属性未定义）

Question

问题

在index.js中，我将modifier的["fullWidth", "secondMod"]属性传递给导入的Container子组件：

index.js

<Container>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
</Container>

// Modifier Prop comes here
<Container modifier={["fullWidth", "secondMod"]}>
    <Img fluid={data.placeholderImage.childImageSharp.fluid} />
</Container>

在container.js中，我想访问console.log中的数组：

container.js

import React from "react"
import PropTypes from 'prop-types';

// Styles
import container from "../styles/components/container.module.scss"

const Container = (props) => {
  console.log(props.modifier.length);   // TypeError: Cannot read property 'length' of undefined
  console.log(props.modifier);          // (2) ["fullWidth", "secondMod"]
  console.log(props.children.length);   // 3

  return (
    <section className={container.section}>
      <div className={`${container.container} ${props.modifier}`}>
          {props.children}
      </div>
    </section>
  )
}

export default Container

尽管如此，第一个console.log(props.modifier.length)引发错误。错误的页面提示是：

TypeError：无法读取未定义的属性'length'

例如使用props.modifier[0]。

问题源

由于@PompolutZ的注释，该错误的问题是index.js中的第一个<Container>。由于它没有通过modifier属性，因此props.modifier和props.modifier.length未定义。

需要解决方案

跟随问题源，我不知道区分通过道具的子组件（此处为<Container>）和不通过道具的子组件的最佳实践是什么。我仍然想处理道具，但是如果有一个没有通过道具的话，我不希望React抛出错误。

Answer 1

使用defaultProps可以防止React引发错误。在这种情况下，这意味着要将以下代码添加到[[container.js中}的右括号（const Container）之后和export default Container之前：

Container.defaultProps = {
  modifier: [],
}

另请参见default Props上的React文档。

Answer 2

我会这样写的（container.js）：

import React from "react"
import PropTypes from 'prop-types';

// Styles
import container from "../styles/components/container.module.scss"

export default ({ children, modifier = [] }) => {
  console.log(modifier && modifier.length);
  console.log(modifier && modifier);
  console.log(children && children.length);

  return (
    <section>
      <div>{children}</div>
    </section>
  );
};