一种解决方法是使用函数形式的setState
,而不是对象形式的setState
。这样可以确保在点击按钮时,每次都会使用最新的state更新。
以下是一个示例代码:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick() {
this.setState(prevState => ({
count: prevState.count + 1
}));
}
render() {
return (
点击次数:{this.state.count}
);
}
}
在上述代码中,handleClick
方法使用函数形式的setState
,接受一个参数 prevState
,表示当前的state。通过使用函数形式的setState
,我们可以确保每次更新state时都使用最新的state值。
这样,在第一次点击按钮时,handleClick
方法会将prevState.count
增加1,并将新的state应用到组件中。在第二次点击按钮时,prevState.count
已经更新为第一次点击后的结果,所以会再次增加1。
这样就实现了“按钮点击在第一次点击时不会更新this.setState
;在第二次点击时更新”的效果。
上一篇:按钮点击与切换动画