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

您使用州的当前值来计算平均值，但同时您使用新值更新状态。因此，基本上，您存储了平均值的陈旧数据。我建议不要存储计算数据，而是在需要时调用方法来计算它。

Answer 2

这里的问题是双重的。

正如Igorsvee准确指出的那样，我正在计算使用旧状态的平均值。我认识了新秀的错误。

然而，问题在我开始使用“新”状态后仍然存在。那时，我了解到状态并没有立即变异，所以即使我有正确的顺序，它仍然使用一个周期的状态。

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

一个州在setState之后落后了

2 个答案: