Question

我有一个函数，该函数根据从不同组件（数量）传递的数量参数计算“总价”，并使用该函数显示div：

 calculateTotal(qty) {
    var t;
    if (qty === 1) {
      t = 250 //total = total + 250
    }
    else if (qty > 1) {
      t = (qty * 250);  //total = qty * 250
    }
    else {
      t = this.state.total
    }
    return this.setState( { total: this.state.total + t })
     }

它将始终显示上一个计算而不是当前计算。因此，如果我输入1，然后输入2作为数量，则第一次输入1时，不会显示任何内容，第二次按2时，显示的数量为250（应为500）

如果有人对最佳行动方案有何建议，将不胜感激。

如果有帮助，这里是触发它的另一个组件中的函数（它们输入一个数量，它将该数量发送给该函数）：

handleChange(event) {
  const key = Number(event.key)

  if (key === "Backspace") {
    this.setState({qty: 0})
    this.props.handleTotal(0);
  } else {
    this.setState({qty: key})
    this.props.handleTotal(this.state.qty);
  }
}

Answer 1

问题似乎出在父组件的handleChange中。您正在调用setState，然后希望将新值传递给下一个函数，但是由于setState是异步的，因此下一行的this.state.qty将保持不变。

handleChange(event) {
  const key = Number(event.key)

  if (key === "Backspace") {
    this.setState({qty: 0})
    this.props.handleTotal(0);
  } else {
    this.setState({qty: key})
    // this.props.handleTotal(this.state.qty); // <-- this will return the old value because setState above isn't done running
    this.props.handleTotal(key); // <-- try this instead
  }
}

Answer 2

 calculateTotal(qty) {
    var t;
    if (qty === 1) {
      t = 250 //total = total + 250
    }
    else if (qty > 1) {
      t = (qty * 250);  //total = qty * 250
    }
    else {
      t = (this.state.total * 2);
    }
    this.setState( { total:  t });
    return t;
     }

请检查是否可行！

反应：无法有条件地更新状态

2 个答案: