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，两者都具有完全相同的值。< / p>

由于您使用简单的计算更新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的每个其他键不变。

计算和改变reactjs中setstate内的状态

1 个答案: