为什么相同的"按钮计数器代码"在沙盒反应中不起作用

Question

你能解释一下这段代码有什么问题吗?我试图使一个简单的按钮计数器代码使用React使用沙盒。有谁能帮我吗?

import React from "react";
import "./styles.css";

class App extends React.Component{

state={
times:0
};

render(){
return(
<div className="App">
<h1>Hello Counter</h1>
<h2>{this.state.times} times button pressed!</h2>
<button onClick= {() => this.setState({ times: this.state.times+1 })}>Click Me</button>
</div>
);
}
}

查看IDE截图

Answer 1

From React Docs

如果下一个状态依赖于当前状态，我们建议使用updater函数形式，例如:

this.setState((state, props) => {
return {counter: state.counter + props.step};
});

因此:

<button onClick= {() => this.setState((prevState) => ({...prevState, times: prevState.times+1 }) }>Click Me</button>