一個狀態在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

您可以使用狀態中的當前值來計算平均值，但是同時要用新值更新狀態。因此，基本上，您可以存儲平均值的陳舊數據。建議您不要存儲計算出的數據，而是在需要時調用該方法進行計算。

Answer 2

這里的問題有兩個。

正如Igorsvee准確指出的那樣，我正在使用舊狀態計算平均值。 我的菜鳥錯誤。

但是，在我開始使用“新”狀態后，問題仍然存在。 到那時，我了解到狀態並不會立即發生變化，因此即使我擁有正確的順序，它仍然使用的是一個周期的舊狀態。

通過將回調作為第二個參數傳遞給setState函數來解決此問題。 此回調稱為AFTER突變，並將使用全新的值。