javascript - 传递给子组件的属性未定义

Question

我有一个父类组件，我在其中设置本地集，如下所示:

constructor(props) {
    super(props);
    this.state = {
      toogleForms: props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })),
    };

    this.removePeriodCallback = this.removePeriodCallback.bind(this);
  }

因为，在初始渲染时，我没有从 props 中获取 perioder，我正在使用 componentWillReceiveProps 来更新本地状态:

componentWillReceiveProps(props) {
    const toogleFormsLength = this.state.toogleForms.length;

    if (toogleFormsLength < props.perioder.length) {
      const addedPeriod = props.perioder
        .filter((periode, index) => index >= toogleFormsLength)
        .map((periode, index) => ({ index: toogleFormsLength + index, open: !periode.bekreftet }));

      this.setState({ toogleForms: this.state.toogleForms.concat(addedPeriod) });
    }

    if (toogleFormsLength > props.perioder.length) {
      const toogleForms = this.state.toogleForms.filter((periode, index) => index < toogleFormsLength - 1);

      this.setState({ toogleForms });
    }
  }

然后，我将 ToogleForms 从本地状态发送到 redux-form fieldArray 组件，如下所示:

  <FieldArray
      name="perioder"
      component={UttakPeriode}
      removePeriodCallback={this.removePeriodCallback}
      inntektsmelding={inntektsmelding}
      toogleForms={this.state.toogleForms}
      toggleFormCallback={this.toggleFormCallback}
    />

但是，在我接收此 Prop 的 UttakPeriode 组件中，当我尝试使用它时，我收到 undefined :

export const UttakPeriode = ({
  fields, inntektsmelding, removePeriodCallback, toggleFormCallback, toogleForms,
}) => (
  <div>
    {fields.map((fieldId, index) => {
      const tilDato = fields.get(index).tom;
      const fraDato = fields.get(index).fom;
      const { uttakPeriodeType, bekreftet, utsettelseÅrsak } = fields.get(index);
      const arbeidsgiverNavn = inntektsmelding[0].arbeidsgiver;
      const showForm = toogleForms.filter(el => el.index === index)[0].open;

这是错误:

TypeError: Cannot read property 'open' of undefined in UttakPeriode (created by ConnectedFieldArray)

我不确定，但我猜子组件在收到 Prop 之前就被渲染了，所以这就是它未定义的原因。但是，我该如何解决这个问题？

Answer 1

您要求多个状态同时到位并可用。我只需将 UttakPeriode 函数的最后一行分解为两部分，并在尝试使用 open 属性之前检查是否有可用数据。

替换:

const showForm = toogleForms.filter(el => el.index === index)[0].open;

与:

const form = toogleForms.filter(el => el.index === index)[0];
const showForm = (form) ? form.open : null;
// ...error handle or return if showForm == null