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

Question

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

我想在每次单击按钮时将 nextPage 的状态递增 1。

我试过删除 handleClick 方法中的 return。我还尝试添加一个变量来保存更新的 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

Answer 1

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

onClick={() => this.handleClick}

相当于

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

这与

不同

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

或

onClick={this.handleClick}

Answer 2

您的点击处理程序未被调用，您可能希望像

那样更改您的代码

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

如果你想在每次点击时将状态加一，你会这样做，

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

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

希望对您有所帮助

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

Can't figure out why onClick is not updating state

onclick

setstate

reactjs