Гэтсби: Доступ к длине массива реквизита в компоненте приводит к TypeError (свойство undefined)

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:

. 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 проблема с ошибкой является первой <Container> в индексе. js. Поскольку он не пропускает modifier prop, props.modifier и props.modifier.length не определены.

Требуемое решение

Исходя из Источник проблемы , я не знаю, какова наилучшая практика для разграничения подкомпонентов ( здесь <Container>), которые пропускают опору, а те, которые не пропускают. Я все еще хочу обработать реквизит, но не хочу, чтобы React выдавала ошибку, если есть такая, которая не прошла реквизит.

Answer 1

Я бы написал так (контейнер. 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>
  );
};

Answer 2

Использование defaultProps может помешать React выдать ошибку. В этом случае это будет означать добавление следующего кода в контейнер . js после закрывающей скобки (}), равной const Container и до export default Container:

Container.defaultProps = {
  modifier: [],
}

Также см. Документацию React по Реквизитам по умолчанию .