Question

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

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

我尝试删除handleClick方法中的返回值。我还尝试添加一个变量来保存更新的num，并将其作为状态值传递给

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

未调用您的点击处理程序，您希望更改代码，例如

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

如果您想在每次单击时将状态增加1，则可以这样做，

model.compile(optimizer='adam', loss=lambda y_true, y_pred: y_pred)

在这里，我们将更新程序传递给setState是因为react会批量处理状态更新，因此，如果您直接访问它，可能是不正确的

希望有帮助

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

2 个答案: