Не могу понять, почему onClick не обновляет состояние

Question

Я знаю, что есть похожие вопросы по этой проблеме, но я не смог использовать эти ответы, чтобы заставить мой код работать ..

Я хочу увеличивать состояние nextPage на 1 каждый раз, когда нажимается кнопка,

Я пытался удалить возврат в методе handleClick. Я также попытался добавить переменную для хранения обновленного числа и передать ее как значение состояния, например, так:

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

Ваш обработчик кликов не вызывается, вы можете изменить свой код следующим образом:

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

Если вы хотите увеличивать состояние на единицу при каждом нажатии, вы должны сделать это,

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

Здесь мы передаем программу обновления setState, потому что реагирует пакетное обновление состояния, поэтому, если вы обращаетесь к нему напрямую, оно может быть неправильным

Надеюсь, это поможет

Answer 2

Вы не вызываете handleClick при нажатии кнопки.

onClick={() => this.handleClick}

эквивалентно

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

, что не совпадает с

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

или

onClick={this.handleClick}