在reactjs中的setstate中计算和更改状态

Question

我有两个状态结果，它们最初设置为零，而val最初设置为1。在乘法函数中，我按如下方式更改状态。

multiply(){

    console.log('multiply is clicked');

    console.log('numberformed is '+this.state.numberformed);
    this.setState(()=>{
        return{


          val:this.state.val*this.state.numberformed,
          result:this.state.val,


        };

    });

   }

在这里，this.state.numberformed输出12，这是我使用控制台检查的。 我希望结果等于12，所以我首先更改了val，就像在代码中看到的那样，但结果仍显示为1，这是val的初始状态，而不是val的更改状态。我应该怎么做？

Answer 1

setState的棘手部分是名称有点误导。 实际上更像是scheduleStateUpdate 。

您提供给setState的函数返回一个对象，React在更新时将与this.state合并。 在更新发生之前， this.state始终引用当前状态。 在return语句内部，肯定没有发生更新，因为还没有计划更新。 return语句用于计划更新。

看起来这可能是您要尝试执行的操作：

this.setState(() => {
  const val = this.state.val * this.state.numberformed
  return {
    result: val
  }
})

return语句的括号可能使您感到困惑。 是的，看起来很像函数体的括号，或类似的内容，放在哪里。 但这实际上是从该函数返回一个javascript 对象 。

该声明

return {
  result: val
}

从概念上看更像这样：

return (
  { result: val }
)

这会将一个名为result的键添加到this.state ，可以通过this.state.result访问。 在您的代码中，假定为result实际上分配了您期望的值，则将两个键添加到状态： val和result ，这两个键将具有完全相同的值。

由于您可以通过简单的计算来更新state ，因此您可以制作一个更短的版本，而无需使用任何中间变量（如val或什至一个函数）：

this.setState({result: this.state.val * this.state.numberformed})

或者，更容易理解的是：

const { val, numberformed } = this.state
this.setState({result: val * numberformed})

这会将this.state.result设置为乘法结果，并使this.state所有其他键保持不变。