один конкретный реквизит становится неопределенным при размонтировании компонента

Question

Итак, это очень странно для меня.

в моем магазине Redux я должен выполнить следующие действия: meal:

{id: 39,
 name: "Poisson à la basque",
 restaurant: {
   id: 3,
   MID: "123456",
   name: "le pré catelan"
 }
}

У меня есть родительский компонент Container и дочерний компонент, в котором родитель предоставляет реквизиты для дочернего элемента.

(для простоты я не буду объяснять здесь, что я не могу получить прямой доступ к хранилищу избыточности из дочернего компонента. Дело в том, что я не могу.)

 class Parent extends Components {
 render() {
 return (
     <Child
      mealId={this.props.meal.id}
      MID={this.props.meal.restaurant.MID} 
      />
   )
 }
}


class Child extends Components {
  render() {
    return (
      <div>
        {this.props.MID ? (
          <p>There is a MID</p>
          ) : (
          <p>there is no MID</p>
          )
        }
      )
  }
}

Вот чтослучается: Parent и Child вызываются в компоненте Modal из reactstrap.Когда Modal (и, следовательно, компоненты Parent и Child) монтируются, все работает отлично.Но когда я запускаю событие, которое должно скрывать компонент Modal (например, щелкнуть за пределами модального или крестика в правом верхнем углу), появляется следующее сообщение об ошибке:

TypeError: Cannot read property 'MID' of undefined, и оно выделяетстрока от Parent: MID={this.props.meal.restaurant.MID}.

Обратите внимание, что это происходит только тогда, когда я пытаюсь использовать любое значение из объекта restaurant, который находится внутри объекта meal.При использовании значений непосредственно из объекта meal я не получаю ошибки.

Как это возможно?

Не стесняйтесь комментировать, если я забыл добавить любую соответствующую информацию, чтобы помочь мне решить проблему.

edit: вот редуктор:

case TOGGLE_MEAL_MODAL: {
  return {
    ...state,
    mealModalOpen: !state.mealModalOpen,
    meal: action.payload.meal
  }
}

где action.payload.meal - это объект, упомянутый выше, если модальное окно должно быть открыто, и {}, если модальное окно должно быть закрыто.

Answer 1

Когда модальное устройство размонтируется, оно меняет объект meal на {} в хранилище с избыточностью.Следовательно, this.props.meal.restaurant.MID не будет работать;если пустой объект не выглядит так:

{meals: 
  {
    restaurant: {
      MID: ""
    }
  }
}

, чтобы он оставался действительным объектом.