setState时使用函数传递state值,在回调函数中获取最新更新后的state,举例代码
时间: 2024-03-26 19:36:28 浏览: 149
向 SetTimer的回调函数传递参数
3星 · 编辑精心推荐
当我们使用 `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` 获取更新后的最新值并打印到控制台上。
阅读全文