javascript - 状态没有正确增加reactjs

Question

这个问题已经有答案了:

Why does calling react setState method not mutate the state immediately? (10 个回答)

已关闭 3 年前。

我正在尝试向我的 react 应用程序添加分页。问题是我的this.state.id没有正确递增。当我按 id="2" 的第二个按钮时，状态增加较晚，因此，它正在加载旧的 this.state.id数据。不知道问题出在哪里

我的逻辑:

状态从 1 开始，因为那是第一页

this.state = {id: 1}

handleClick = (e) => {
    let value = e.target.id
    let nextValue = e.target.value
    if (nextValue === "Next") {
        this.setState({ id: this.state.id + 1 })
    }
    else {
        this.setState({ id: value })
    }
    console.log("This is value " + value)
    console.log(this.state.id)
    this.loadData(this.state.id)
    }

我的分页按钮:

<div className="row">
    <div className="col-sm-12">
        <ul className="pagination justify-content-end">
            <li className="page-item"><button id="1" className="page-link" onClick={this.handleClick}>1</button></li>
            <li className="page-item"><button id="2" className="page-link" onClick={this.handleClick}>2</button></li>
            <li className="page-item"><button id="3" className="page-link" onClick={this.handleClick}>3</button></li>
            <li className="page-item"><button value="Next" className="page-link" onClick={this.handleClick}>Next</button></li>
        </ul>
    </div>
</div>

正在发生的事情的示例:

当我按下 id 2 的第二个按钮时，它会打印 This is value 2 ，但是this.state.id仍然是1 。当我按下按钮 3 时，它会打印 This is value 3 ，但是this.state.id仍然是2 。这导致了我的问题，它为页面获取了错误的数据。

Answer 1

setState是异步的，引用https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0 .

setState 使您可以在设置状态后创建回调函数，以便获得真实的状态。对于你的情况

this.setState({id: value}, () => console.log(this.state.id));