时间戳

首页 > 解决方案 > REACT-Native 条件道具抛出错误

javascript - REACT-Native 条件道具抛出错误

问题描述

我是相当新的 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')

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

标签： javascriptreactjsreact-native

解决方案

我通过更改我的 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,
};

}

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

推荐阅读