setState回调不等待状态更新

Question

我有这段代码：    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: Cannot read property 'value' of undefined它说问题出在这一行： maxLevel: event.target.value 。我不明白，回调不是应该等待第一个 setstate 结束才能执行吗？为什么它不重新调整设置为 maxLevel 状态的值？

Answer 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调用中完成所有这些操作，而不是使用回调

Answer 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 });

}