Question

handleOptions是一种方法，每次单击一个按钮时都会调用该方法，并传递一个用于更新this.state.options的选项对象。

this.state = {
    options: []
}

handleOptions(options){
    let stat = this.state.options;
    console.log(stat)
    stat.push(options)
    this.setState({ options: stat })
}

正如您所看到的，我在调用this.setState之前记录了以前的状态选项，以将其添加到状态。但由于某种原因，日志输出显示更新的状态。它会按预期第一次记录一个空数组，但之后会记录更新后的状态

我也尝试将函数传递给this.setState而不是对象，结果相同。

handleOptions(options){
    this.setState((prevState) => {
        let stat = prevState.options;
        console.log(stat)
        stat.push(options)
        return {options: stat}
    })
}

我缺少什么？

Answer 1

push改变了原始数组。您可以改用concat。

handleOptions(options){
    this.setState((prevState) => {
        let stat = prevState.options;
        console.log(stat)
        return {options: stat.concat(options)}
    })
}

截至

但由于某种原因，日志输出显示更新状态

控制台尝试显示当前对象状态。因此，如果使用push修改数组，您将看到修改后的值。如果您想在特定时刻记录该值，您可以说记录副本console.log(stat.slice())或字符串化表示console.log(JSON.stringify(stat))

为什么在调用setState之前状态显示更新

1 个答案: