Javascript 正在为传递给子组件的属性获取未定义

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

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

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

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

因为，在初始渲染时，我没有从

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 });
    }
  }

但是，在我收到这些道具的

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;

export const UttakPeriode=({
字段、inntektsmelding、removePeriodCallback、toggleFormCallback、toogleForms、，
}) => (
{fields.map（（fieldId，index）=>{
const tilDato=fields.get（index.tom）；
const fraDato=fields.get（index）.fom；
const{uttakPeriodType，bekreftet，utsettelseÅrsak}=fields.get（index）；
常数arbeidsgiverNavn=inntektsmelding[0]。arbeidsgiver；
const showForm=toogleForms.filter（el=>el.index==index）[0]。打开；

这就是错误：

TypeError:无法读取UttakPeriode中未定义的属性“open” （由ConnectedFieldArray创建）

---

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

toogleForms

不是

未定义的

，因为您可以过滤它，所以过滤

toogleForms

后只会得到空数组

---

尝试

console.log（toogleForms.filter（el=>el.index==index））

首先查看它是否有任何元素。

您要求许多状态同时存在和可用。我只需将

UttakPeriode

函数的最后一行分解为两部分，并在尝试使用

open

属性之前检查是否有可用数据

替换：

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

与：

---

您必须使用

.bind

。

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