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

Codepen-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:是line label，而state.count + 1是一个永不使用的表达式。如果要使用简洁箭头函数语法返回对象文字，则需要将对象包装在括号中：

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

Answer 3

问题出在.arrow-right { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17.3px; margin: 0px 0px 5px 0px; border-color: transparent transparent transparent black; background-color: #ffcd11; } .arrow { display: inline-block; padding-left: 17.3px; background-color: #ffcd11; }上，您错过了一对括号！这是正确的版本：

setCount()

还有两个括号！在setCount() { this.setState((state) => ({ count: state.count + 1 })); }之后一个，然后在=>调用之后一个。

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

3 个答案: