setState 之后落后一个状态

Question

在我的 React 组件中，我有一个调用this.setState并更新一些状态的函数。然而，其中之一总是“落后”一个州，我怀疑这是因为它的称呼方式。

这是设置状态的函数：

handleReps(reps) {
    var average = this.getAverage();
    this.setState({
        var1: CALCULATORS.epley(reps, this.state.weight),
        var2: CALCULATORS.brzycki(reps, this.state.weight),
        var3: CALCULATORS.lander(reps, this.state.weight),
        // some more
        average: average
    });
}

现在，所有这些都更新得很好，并且在 DOM 中发生了更改，但状态average始终落后一个周期。也就是说，它始终显示上次更改之前应有的值。即最后一次setState被调用。

是否有一些已知因素可能导致其中一个州出现这种延误？

编辑：这是getAverage()函数。

getAverage () {
    return CALCULATORS.average([
        this.state.epley, this.state.brzycki, this.state.lander,
        this.state.lombardi, this.state.mayhew, this.state.oconner,
        this.state.wathen
    ])
}

Answer 1

这里的问题有两个方面。

正如 Igorsvee 准确指出的那样，我正在使用旧状态计算平均值。我的菜鸟错误。

然而，在我开始使用“新”状态后，问题仍然存在。那时，我了解到状态不会立即发生变化，因此即使我有正确的顺序，它仍然使用单周期旧状态。

这是通过将回调作为第二个参数传递给setState函数来解决的。这个回调被称为AFTERmutation，并且将使用全新的值。