按钮点击第一次不会更新this.setState；第二次点击才会更新。

14 浏览
0 Comments

按钮点击第一次不会更新this.setState；第二次点击才会更新。

我正在尝试在React中构建我的第一个计算器。

我的按钮似乎出了问题（我认为是这个原因）。

在使用console.log进行测试时，我发现第一次点击加法按钮时，并未更新所有的setStates。相反，第二次点击才能正确更新。

有任何想法为什么它不起作用吗？

我有一个名为"DaInserting"的div，当用户点击任何数字键时，它会被更新，然后当用户点击加法/减法等按钮时，v1应该被更新，但它没有。它在第二次点击时才会更新-请查看console.log。

在用户点击加法/减法后，"DaInserting"被重置，然后用户再次点击一些数字，然后点击结果按钮，这时它应该检查用户选择的是什么（加法/减法）。

0

2 答案

0 Comments

在React中，setState是异步的（参见这些文档），因此不能在调用setState之后立即依赖于状态的更新。相反，通常需要等到下一次渲染时才能更新状态值。

为了解决这个问题，可以通过将回调函数（作为第二个参数）传递给setState，或者使用await，或者直接使用正在更新状态的新值。在这里，我建议使用最后一种选项。另外，通常最好在退出函数之前调用setState，以避免异步混乱。

这是一个更新deAnswer方法的示例：

deAnswer = () => {
    let answer = 0;
    if (this.state.isCal === "add") {
        answer = this.state.v1 + this.state.xxxxx;
        console.log("and the answer is :" + answer);
    }
    this.setState({
        v2: this.state.v1,
        answer: answer,
    })
}
render() {
    return (
        <div className="row">
            <div id="DaInserting">{ this.state.answer }</div>
        </div>
    )
}

还要注意，我已经删除了设置innerHTML的部分，因为你应该通过使用状态变量进行渲染而不是直接操作DOM来更改"DaInserting" div的内容。

此外，考虑查看React入门教程，它是一个很好的阅读材料，可以帮助你学习和构建React应用。

谢谢您。我对一件事情感到困惑，使用innerHTML有什么害处？

使用innerHTML存在可能受到XSS攻击的风险，尽管在这里这并不是一个问题。主要的问题是它不是最佳实践，而使用state和render来修改显示内容是最好的做法。在更复杂的示例中，使用innerHTML可能会变得繁琐，并且会使代码更难阅读。

0
0 Comments

当点击按钮时，this.setState没有在第一次点击时更新；而是在第二次点击时更新。这个问题出现的原因是，setState是一个异步函数。解决方法是将函数作为回调函数传递给setState，以便在状态更新后执行。具体做法如下：

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)
});

通过将回调函数作为参数传递给setState，可以确保在状态更新完成后执行相应的操作，从而解决这个问题。

0