Reactjs 在React中制作计算器应用程序。设置状态不工作

我正在用React做一个计算器应用程序。这里我有应用程序组件和按钮组件。当我单击按钮时，尽管我使用参数（event.target.getAttribute（'data-number'）设置了state，但控制台记录的数字与按钮的属性不同

当我单击“数据编号=1”的按钮时，状态“结果”设置为“0”。然后我单击“数据编号=7”的按钮，状态“结果”设置为“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>
        );
    }
}

类应用程序扩展了React.Component{
状态={结果：0}；
当前编号=（编号）=>{
this.setState（{result:number}）
console.log（“来自按钮的编号”，编号）；//1
console.log（“状态中的当前编号”，this.state.result）；//0
}
render（）{
返回(
);
}
}

class按钮扩展React.Component{
render（）{
返回(

this.props.onClick（event.target.getAttribute（'data-number'））}>1

对

setState

的调用是异步的，这意味着状态不会立即更新。您可以传递在状态更新后运行的回调：

this.setState({ result: number }, () => {
        console.log("Number from Button", number); // 1
        console.log("Current number in state", this.state.result); // 1
})

---

对

setState

的调用是异步的，这意味着状态不会立即更新。您可以传递在状态更新后运行的回调：

this.setState({ result: number }, () => {
        console.log("Number from Button", number); // 1
        console.log("Current number in state", this.state.result); // 1
})

---

正如@Smarticles101所提到的，

setState

是异步的

请注意回调日志和外部回调日志之间的差异。有关详细信息，请查看这些日志

类应用程序扩展了React.Component{
状态={结果：0}；
当前编号=（编号）=>{
this.setState（{result:number}，（）=>{
日志（“回调，编号：”，编号）；
log（“回调，结果：”，this.state.result）；
})
log（“外部回调，编号：”，编号）；
log（“外部回调，结果：”，this.state.result）；
}
render（）{
返回(
);
}
}
类按钮扩展了React.Component{
render（）{
返回(

this.props.onClick（event.target.getAttribute（'data-number'））}>1，
this.props.onClick（event.target.getAttribute（'data-number'））}>2
。。。
this.props.onClick（event.target.getAttribute（'data-number'））}>7

)
}
}
ReactDOM.render（（），document.getElementById（'testing'）；

---

正如@Smarticles101所提到的，

setState

是异步的。以下是您的代码正常工作

请注意回调日志和外部回调日志之间的差异。有关详细信息，请查看这些日志

类应用程序扩展了React.Component{
状态={结果：0}；
当前编号=（编号）=>{
this.setState（{result:number}，（）=>{
日志（“回调，编号：”，编号）；
log（“回调，结果：”，this.state.result）；
})
log（“外部回调，编号：”，编号）；
log（“外部回调，结果：”，this.state.result）；
}
render（）{
返回(
);
}
}
类按钮扩展了React.Component{
render（）{
返回(

this.props.onClick（event.target.getAttribute（'data-number'））}>1，
this.props.onClick（event.target.getAttribute（'data-number'））}>2
。。。
this.props.onClick（event.target.getAttribute（'data-number'））}>7

)
}
}
ReactDOM.render（（），document.getElementById（'testing'）；

对不起，我刚刚在按钮组件中剪切了其余的代码。它应该是

this.props.onClick（event.target.getAttribute（'data-number'））}>1

，

this.props.onClick（event.target.getAttribute（'data-number'））}>2

，…

this.props.onClick（event.target.getAttribute（'data-number'））}>7

为了清楚起见，您能将该代码添加到问题的主体中吗？对不起，我刚刚在按钮组件中剪切了其余代码。它应该是

this.props.onClick（event.target.getAttribute（'data-number'））}>1

，

this.props.onClick（event.target.getAttribute（'data-number'））}>2

，…

this.props.onClick（event.target.getAttribute（'data-number'））}>（‘数据编号’）}>7

为了清晰起见，您能将该代码添加到问题的正文中吗？谢谢！我不确定是否理解正确，但我会更多地阅读文档..谢谢！我不确定是否理解正确，但我会更多地阅读文档..谢谢！我仍然不理解异步部分，但我会搜索更多..谢谢！我仍然不理解异步部分，但我将搜索更多。。