Question

我试图从两个输入进行数学运算。首先更新状态，然后使用新更新的状态添加两个值。

<input type="number" onChange={this.handleIncomeChange.bind(this)} value={this.state.income} />

此代码不起作用:(结果总是落后一个数字）

handleIncomeChange(e) {
    this.setState({income: e.target.value});
    this.state.resultMonth = +this.state.income - +this.state.expense;
}

此代码正常运行：

handleIncomeChange(e) {
    const income = e.target.value;
    this.state.resultMonth = +income - +this.state.expense;
    this.setState({income: e.target.value});
}

不确定我是否正确理解React.JS状态。绝对不明白为什么第一个代码不起作用。

Answer 1

您不应该使用this.state =直接修改状态（状态初始化期间除外）。使用setState API进行所有状态修改。

例如：

handleIncomeChange(e) {
  const newIncome = e.target.value;
  this.setState({
    income: newIncome,
    resultMonth: newIncome - this.state.expense
  });
}

更新：基于OP在下面的评论中描述的代码集和问题。

您可以执行以下操作来解决可重用性问题。

handleDataChange(income, expense) {
  this.setState({
    income: income,
    expense: expense,
    resultMonth: income - expense
  });
}

handleIncomeChange(e) {
  const newIncome = e.target.value;
  this.handleDataChange(newIncome, this.state.expense);
}

handleExpenseChange(e) {
  const newExpense = e.target.value;
  this.handleDataChange(this.state.income, newExpense);
}

React.JS使用状态

1 个答案: