Javascript 按钮单击不会在第一次单击时更新此.setState；第二次单击时更新

我正试着在React中构建我的第一个计算器。 我想我的按钮好像有问题。 在使用

console.log

s进行测试时，我发现我第一次单击addition按钮并没有更新所有的设置状态。相反，第二次单击会正确更新它

知道它为什么不起作用吗

import React，{Component}来自'React'；
类计算器扩展组件{
状态={
xxxxx:0，
v1:0，
v2:0，
isCal:null
}
makeAdd=（）=>{
const firstNum=this.state.xxxxx；
这是我的国家({
v1:firstNum，
xxxxx:0，
isCal：“添加”
});
log（“Add，firstNum是”+firstNum）；
log（“v1是：“+this.state.v1”）；
log（“isCal是：“+this.state.isCal”）；
document.getElementById（'DaInserting'）。innerHTML=null；
};
okInsert=（num）=>{
让ss=document.getElementById（'DaInserting'）.innerHTML+=num；
this.setState（{xxxxx:ss}）
}
deAnswer=（）=>{
设SecondNum=this.state.xxxxx；
this.setState（{v2:SecondNum}）
log（“dessecond:+this.state.v2”）；
log（“this.setState.isCal:+this.state.isCal”）；
让答案=0；
this.setState.v2=this.state.xxxxx；
if（this.state.isCal==“添加”）{
答案=this.state.v1+this.state.v2；
log（“答案是：“+answer”）；
}
document.getElementById（'DaInserting'）。innerHTML=answer；
//这个。然后重置（）；
}
然后重置=（）=>{
if（this.setState.isCal！==null）{
this.setState（{xxxxx:0}）
this.setState（{v1:0}）
this.setState（{v2:0}）
this.setState（{isCal:null}）
}
}
render（）{
//console.log（“\n所有状态\n.state.xxxxx:+this.state.xxxxx+”\n.state.v1:+this.state.v1”）；
返回(
this.okInsert（7）}className=“btn btn次要btn lg m-2 btn块”>7
this.okInsert（8）}className=“btn btn次要btn lg m-2 btn块”>8
this.okInsert（9）}className=“btn btn次要btn lg m-2 btn块”>9
/
this.okInsert（4）}className=“btn btn次要btn lg m-2 btn块”>4
this.okInsert（5）}className=“btn btn次要btn lg m-2 btn块”>5
this.okInsert（6）}className=“btn btn次要btn lg m-2 btn区块”>6
x
this.okInsert（1）}className=“btn btn次要btn lg m-2 btn块”>1
this.okInsert（2）}className=“btn btn次要btn lg m-2 btn块”>2
this.okInsert（3）}className=“btn btn次要btn lg m-2 btn块”>3
-
=
{/*this.okInsert（“.”）className=“btn btn次要btn lg m-2 btn块”>.*/}
this.okInsert（0）}className=“btn btn次要btn lg m-2 btn块”>0
+
);
}
}
导出默认计算器；

我有一个名为“DaInserting”的div，当用户单击任意数字键时会更新，然后当用户单击加法/减法/etc时，

v1

应该会更新，但不会。它在第二次单击时得到更新：-检查

console.log

---

在用户单击了加法/减法后，“DaInserting”将重置，用户再次单击一些数字，然后单击结果按钮，该按钮将检查用户选择的内容（加法/减法）

在React中，

设置状态

是异步的（有关详细信息，请参阅），因此，您不能在调用

setState

后立即依赖状态更新。相反，通常需要等到下一次渲染时，才能更新状态值

要解决这个问题，可以将回调函数（作为第二个参数）传递给

setState

，或者使用

wait

，或者直接使用更新状态的新值。在这里，我建议使用最后一个选项。另外，通常最好在退出函数之前只调用

setState

，以避免异步混淆

下面是一个如何更新

deAnswer

方法的示例：

deAnswer=（）=>{
让答案=0；
如果（this.state.isCal==“添加”）{
答案=this.state.v1+this.state.xxxxx；
log（“答案是：“+answer”）；
}
这是我的国家({
v2:this.state.v1，
答:答,，
})
}
render（）{
返回(
{this.state.answer}
)
}

另外请注意，我已经删除了

innerHTML

的设置，因为您可以而且应该通过使用状态变量进行呈现来更改

“DaInserting”

div的内容，而不是直接进行DOM操作

---

也考虑检查，这是一个很好的阅读，可以帮助你在学习和构建中做出反应。

< P>在反应中，<代码> SETSTATE 是异步的（请参阅更多关于此），因此在调用<代码> SETStest之后不能依赖状态更新。相反，通常需要等到下一次渲染时，才能更新状态值

要解决这个问题，可以将回调函数（作为第二个参数）传递给

setState

，或者使用

wait

，或者直接使用更新状态的新值。在这里，我建议使用最后一个选项。另外，通常最好在退出函数之前只调用

setState

，以避免异步混淆

下面是一个如何更新

deAnswer

方法的示例：

deAnswer=（）=>{
让答案=0；
如果(
this.setState({ v1:firstNum, xxxxx:0, isCal:"add"}, () => {
      console.log("Add, firstNum is " + firstNum );
      console.log("and v1 is: " + this.state.v1);
      console.log("and isCal is: " + this.state.isCal);
      console.log(news)
});