setState时使用函数传递state值,在回调函数中获取最新更新后的state,举例代码
时间: 2024-03-26 09:36:28 浏览: 140
详解React中setState回调函数
5星 · 资源好评率100%
当我们使用 `setState` 更新组件的状态时,可以使用函数传递 state 值,以确保获取到最新的 state 值。
以下是一个例子:
```
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1
}), () => {
console.log('Updated count:', this.state.count);
});
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Click Me</button>
</div>
);
}
}
```
在上述代码中,当点击按钮时,`handleClick` 函数会调用 `setState` 方法,通过函数传递 state 值来更新 `count` 的值。在回调函数中,我们可以通过 `this.state.count` 获取更新后的最新值并打印到控制台上。
阅读全文