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 => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; ...this.state,&nbsp; &nbsp; &nbsp; &nbsp; maxLevel: event.target.value&nbsp; &nbsp; }, () => {&nbsp; &nbsp; &nbsp; &nbsp; let filter = this.state.filteredPlayers.filter(players => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return players.level > this.state.minLevel && players.level < this.state.maxLevel&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...this.state,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; levelFilteredPlayers: filter&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })}编辑：我相信您也需要传播旧状态，以防止值丢失。另外，最好在一次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 => {&nbsp; &nbsp; // access state attributes like this:&nbsp; &nbsp; const {minLevel, maxLevel} = this.state;&nbsp; &nbsp; // and now you also have access to the event value&nbsp; &nbsp; this.setState({ maxValue: e.target.value });}