setState 回调不等待状态更新答案

【问题标题】：setState callback not waiting state to updatesetState 回调不等待状态更新
【发布时间】：2020-12-11 02:24:51
【问题描述】：

我有这段代码：

    handleMaxLevel = event => {
    this.setState({
      maxLevel: event.target.value
    }, (minLevel, maxLevel) => {
      let filter = this.state.filteredPlayers.filter(players => {
        return players.level > minLevel && players.level < maxLevel
      })
      this.setState({
        levelFilteredPlayers: filter
      })
    })
  }

我在这段代码上调用了这个函数：

 <TextField
        id="standard-number"
        label="Highest level"
        type="number"
        onChange={() => this.handleMaxLevel(this.state.minLevel, this.state.maxLevel)}
        InputLabelProps={{
          shrink: true,
        }}
  />

我得到的东西是：TypeError：无法读取未定义的属性“值”
据说问题出在这一行：maxLevel：event.target.value。
我不明白，回调不是应该等待第一个 setstate 结束以便执行吗？
为什么它没有重新调整设置为 maxLevel 状态的值？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的语法不正确。当您调用handleMaxLevel 时，您应该将事件对象传递给它。 setState 回调不需要任何参数，它已经可以访问更新的状态。所以你onChange 处理程序应该是这样的：

onChange={handleMaxLevel} // If we pass function directly, it will be given the event argument by default

然后在您的 setState 回调中，直接引用状态值，因为它们将在回调中更新：

handleMaxLevel = event => {
    this.setState({
        ...this.state,
        maxLevel: event.target.value
    }, () => {
        let filter = this.state.filteredPlayers.filter(players => {
            return players.level > this.state.minLevel && players.level < this.state.maxLevel
        })
        this.setState({
            ...this.state,
            levelFilteredPlayers: filter
        })
    })
}

编辑：我相信您也需要传播旧状态，以防止价值丢失。此外，最好在一个 setState 调用中完成所有这些操作，而不是使用回调

【讨论】：

【解决方案2】：

这里出了什么问题是你的函数需要一个参数

const handleMaxLevel = event => {
// ...
}

但是，您的调用发送了两个参数

onChange={() => this.handleMaxLevel(this.state.minLevel, this.state.maxLevel)}

如果你想改变你的函数来接受事件和状态变量：

// Change invocation like so:
onChange={event => this.handleMaxLevel(event, this.state.minLevel, this.state.maxLevel)}

// Change function definition like so:
const handleMaxLevel = (event, minLevel, maxLevel) => {
// ...
}

但是，由于您只是在函数中使用状态属性，因此您甚至不需要显式传递它们：

onChange={e => this.handleMaxLevel(e)}

这会让你的函数看起来像这样：

const handleMaxLevel = event => {
    // access state attributes like this:
    const {minLevel, maxLevel} = this.state;
    // and now you also have access to the event value
    this.setState({ maxValue: e.target.value });
}

【讨论】：