无法弄清楚为什么 onClick 没有更新状态答案

【问题标题】：Can't figure out why onClick is not updating state无法弄清楚为什么 onClick 没有更新状态
【发布时间】：2019-10-05 17:00:49
【问题描述】：

我知道围绕这个问题有类似的问题，但我无法使用这些答案来让我的代码正常工作..

每次单击按钮时，我都希望将 nextPage 的状态增加 1。

我已尝试删除 handleClick 方法中的返回。我还尝试添加一个变量来保存更新的 num 并将其作为 state 的值传递，就像这样

handleClick = (num) => {
let x = num++
        return this.setState({
            nextPage: x
        })
    }

我没有尝试更新状态。这是我当前的代码如下：

import React, { Component } from 'react'


class Pages extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nextPage: 1
        }

    }
    handleClick = (num) => {
        return this.setState({
            nextPage: num++
        })
    }

    render() {
        return (
            <div className='pageNav'>


                <button className="nextButton" onClick={() => this.handleClick}>Next </button>

            </div>
        )
    }

}

export default Pages

【问题讨论】：

标签： reactjs onclick setstate

【解决方案1】：

当你按下按钮时，你没有调用handleClick。

onClick={() => this.handleClick}

等价于

onClick={() => {
  return this.handleClick
}}

和

不一样

onClick={() => {
  return this.handleClick(/* do you need to pass a number here? */)
}}

或

onClick={this.handleClick}

【讨论】：

感谢您抽出宝贵时间回复。不过，我还是不完全明白。前两个示例正在返回函数，而后两个正在调用它？我厌倦了第三个，因为这是最有意义的，并传入了一个 2 的参数，但是当点击它时，它会将状态更新为 2，但不会将其加一作为例外
您可能希望您的回调执行this.setState({ nextPage: this.state.nextPage + 1 }) 之类的操作

【解决方案2】：

你的点击处理程序没有被调用，你想改变你的代码像

 <button className="nextButton" onClick={() => this.handleClick()}>Next </button>

如果您希望每次单击时将状态加一，您可以这样做，

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

这里我们将updater传递给setState，因为react会批量更新状态，所以如果你直接访问它可能不正确

希望对你有帮助

【讨论】：