时间戳

首页 > 解决方案 > setState 回调不等待状态更新

javascript - setState 回调不等待状态更新

问题描述

我有这段代码：

    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 状态的值？

标签： javascriptreactjs

解决方案

你的语法不正确。当您调用时，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调用中完成所有操作，而不是使用回调

推荐阅读