计算和更改 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
}
})

返回语句的括号可能会使您绊倒。是的，它看起来非常像函数体的括号，或者语句所在的位置。但它实际上是从函数返回一个 javascript对象。

声明

return {
result: val
}

在概念上看起来更像这样：

return (
{ result: val }
)

这会将一个名为result的键添加到this.state中，可作为this.state.result访问。在您的代码中，假设result实际上被分配了您期望的值，则会向 state 添加两个键：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的所有其他键保持不变。