我正在 React 中制作一个计算器应用程序。这里我有 App 组件和 Button 组件。当我单击一个按钮时，尽管我使用参数 (event.target.getAttribute('data-number') 设置了状态，它控制台记录的数字与按钮的属性不同。
当我单击带有“data-number=1”的按钮时，状态“result”设置为“0”。然后我单击带有“data-number=7”的按钮，状态“result”设置为“1”。我想知道发生了什么以及如何解决这个问题。
class App extends React.Component {
state = { result: 0 };
currentNumber = (number) => {
this.setState({ result: number })
console.log("Number from Button", number); // 1
console.log("Current number in state", this.state.result); // 0
}
render() {
return (
<div>
<Button onClick = {this.currentNumber} />
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<ul>
<li><button data-number="1" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>1</button></li>
</ul>
调用setState是异步的，这意味着状态不会立即更新。您可以传递在状态更新后运行的回调：
this.setState({ result: number }, () => {
console.log("Number from Button", number); // 1
console.log("Current number in state", this.state.result); // 1
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句