REACT-Native 条件道具抛出错误答案

【问题标题】：REACT-Native conditional props throwing errorREACT-Native 条件道具抛出错误
【发布时间】：2020-09-20 03:10:36
【问题描述】：

我是相当新的 REACT/REACT-Native 开发人员。我正在构建一个 React-Native 应用程序，并且我有一个用于创建新预算或编辑预算的表单。我一开始很简单，每个创建和编辑功能都有两个独立的组件。我的所有功能都正常工作了，所以我开始重构我的代码，以便从预算表格中制作一个可重复使用的组件。我为预算表创建了一个新组件。在预算表中，我设置了如下所示的状态。当使用“创建”表单时，预算属性为空，因为没有任何内容传递到组件中。当使用“编辑”表单时，会传入预算道具。

state = {
formMode: this.props.formMode,
budget: {
  id: this.props.budget.BudgetId ? this.props.budget.BudgetId : "",
  name: this.props.budget.Name ? this.props.budget.Name : "",
  color: this.props.budget.Color
    ? this.props.budget.Color
    : this.backgroundColors[0],
  type: this.props.budget.Type ? this.props.budget.Type : "",
  startDate: this.props.budget.StartDate ? this.props.budget.StartDate : "",
  endDate: this.props.budget.EndDate ? this.props.budget.EndDate : "",
},
deviceLocale: "",
datepickerMode: "date",
showStartDatePicker: false,
showEndDatePicker: false,
};

我从父组件调用“创建”表单，如下所示

<BudgetForm formMode={Constants.FORM_Mode_Add} />

我从父组件调用“编辑”表单，如下所示

<BudgetForm formMode={Constants.FORM_Mode_Edit} budget={this.props.list}/>

当我打开“创建”表单时，我收到此错误：

TypeError: undefined is not an object (evaluating '_this.props.budget.BudgetId')

我在我的应用程序中以另一种形式在我的道具上使用这个条件三元运算符，它在那里工作正常。我似乎无法弄清楚这里有什么问题？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

我通过更改我的 BudgetFrom 组件中的状态对象解决了我的问题，如下所示。

constructor(props) {
super(props);
this.state = {
  formMode: this.props.formMode,
  id: this.props.id ? this.props.id : "",
  name: this.props.name ? this.props.name : "",
  color: this.props.color ? this.props.color : backgroundColors[0],
  type: this.props.type ? this.props.type : "",
  startDate: this.props.startDate ? this.props.startDate : "",
  endDate: this.props.endDate ? this.props.endDate : "",
  deviceLocale: "",
  datepickerMode: "date",
  showStartDatePicker: false,
  showEndDatePicker: false,
};

}

通过没有将状态中的“预算”对象作为“子”对象，它似乎解决了问题。

【讨论】：