javascript - 无法使用 react 中的状态增加计数

<分区>

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

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'))

Codepen - https://codepen.io/anon/pen/LaMOEp

最佳答案

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

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

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

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

关于javascript - 无法使用 react 中的状态增加计数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55303304/

上一篇：javascript - 无法在 if 语句中设置状态

下一篇：javascript - react /功能组件/ Prop 改变/getDerivedStateFromProps

相关文章：

reactjs - 防止重新渲染 flatlist React Native

javascript - 从 $http 服务返回选项列表时，ng-option 不起作用

javascript - 获取 POST 输入错误的意外结束

javascript - GWT javascript 未捕获异常

reactjs - React Native 中的 Jest 测试/模拟时刻

javascript - 如何将函数传递到自己的 react 上下文提供程序中以允许您编辑状态？

reactjs - 为多级状态对象 react setState

javascript - 如何检测路由器路径 '/' 何时为真？

javascript - 页面加载后从 EpicEditor 中的文本区域同步值

javascript - 如何确保在不使用 WebFont Loader 的情况下加载 @font-face