无法在反应中使用状态增加计数

Question

以下是我的代码，我尝试使用单击按钮增加计数，但它没有更新值。虽然我在控制台中也没有收到任何错误。让我知道我在这里做错了什么。

JS代码 -

class App1 extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
this.setCount = this.setCount.bind(this)
}
setCount() {
this.setState((state) => {
count: state.count + 1
})
}

render() {
return (
<>
<hr />
<h3>test increment</h3>
<button onClick={this.setCount}>Click</button>
<p>{this.state.count}</p>
</>
)
}
}
ReactDOM.render(<App1 />, document.getElementById('root'))

代码笔 - https://codepen.io/anon/pen/LaMOEp

Answer 1

你没有返回任何东西。您可以在侧回调中使用return。

setCount() {
this.setState((state) => {
return {count: state.count + 1}
}))
}

或者，您可以使用避免使用return包装，在=>后返回值()

setCount() {
this.setState((state) => ({
count: state.count + 1
}))
}

Answer 2

this.setState((state) => {
count: state.count + 1
})

在上面的代码中，大括号是函数的主体，count:是行标签，state.count + 1是永远不会使用的表达式。如果要使用简洁的箭头函数语法返回对象文本，则需要将对象括在括号中：

this.setState((state) => ({
count: state.count + 1
}))

Answer 3

问题出在setCount()中，您错过了一对括号！这是正确的版本：

setCount() {
this.setState((state) => ({
count: state.count + 1
}));
}

还有两个括号！一个在=>之后，一个在this.setState()电话之后。