Question

所以，这对我来说很奇怪。

在我的Redux商店中，我必须关注meal：

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

我有一个容器父级组件和一个子级组件，其中父级为该子级提供道具。

（为简单起见，我在这里不做解释，我不能直接从子组件访问redux存储。问题是：我不能。）

 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的{{1}}组件内调用了Child和Modal。当reactstrap（以及Modal和Parent组件）挂载时，一切正常。但是，当我触发应隐藏Child组件的事件时（例如，在模式外部或在右上角的交叉处单击），会出现以下错误：

Modal，并突出显示TypeError: Cannot read property 'MID' of undefined中的行：Parent。

请注意，只有当我尝试使用MID={this.props.meal.restaurant.MID}对象内部的restaurant对象的任何值时，它才会发生。直接使用meal对象的值时，没有任何错误。

这怎么可能？

如果我忘记添加任何相关信息来帮助我解决问题，请随时发表评论。

编辑：这是减速器：

meal

其中case TOGGLE_MEAL_MODAL: { return { ...state, mealModalOpen: !state.mealModalOpen, meal: action.payload.meal } }是上面要提到的对象，如果要打开模式，而action.payload.meal是上面要提到的对象。

Answer 1

卸载模态后，它将在redux存储中将meal对象更改为{}。因此this.props.meal.restaurant.MID将不起作用；除非空对象看起来像这样：

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

以便它仍然是有效对象。

卸下组件时，一个特定的道具变得不确定

1 个答案: