3

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

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

4

3 回答 3

2

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

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

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

setCount() {
   this.setState((state) => ({
      count: state.count + 1
   }))
}
于 2019-03-22T15:50:09.670 回答
2
this.setState((state) => {
  count: state.count + 1
})

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

this.setState((state) => ({
  count: state.count + 1
}))
于 2019-03-22T15:51:44.383 回答
1

问题在于setCount(),您错过了一对括号!这是正确的版本:

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

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

于 2019-03-22T15:50:59.677 回答