反応が更新された状態

Question

反応しているjsを使用しています。私の状態で格納されている配列では、その配列をユーザアクションで更新します。それから私はエラーを表示しています。今の問題は、それがエラーはまだそれが値を更新示すことが起こっ

updateValuePercent = key => { 
    let MixDataTemp = [...this.state.MixData]; 
    let MixData = [...MixDataTemp]; 

let reduceValue = 0.005/4; 
MixData.map(data => { 


     data.mix.map(name => { 

      if (name.pk === key.pk) { 

       name.volume = name.volume - 0.005; 

      } else { 

      name.volume = name.volume - reduceValue; 

      } 
      return name; 
     }); 
     return data; 

    }); 
    let nwSum = updatedData 

     .map(data => data.mix) 
     .map(data => data.volume) 
     .reduce((a, b) => a + b); 
if (nwSum <= 1) {//condition to update the data 
     this.setState({ 
     MixData: updatedData, 
     MixError: '' 
     }); 
    } else { 
     this.setState({ MixError: 'values can not go beyond one' });//showing error on page still updating the state 
    } 
} 

私は私がやったことは、私はそれを行うべきではありませんが、少なくともそれはない私の状態に少なくともメートルの不変のコピーを取るべきで可変である知っています状態

EDIT 1： ここでは、あなたが本当に状態に持ってMixData値を表示したくない場合は、私は明示的に伝えることがヌル（またはになり、いくつかの値だとリアクトたい私のcodepen link

Answer 1

ですユーザーにはインクリメントできないことがわかります）。

if (nwSum <= 1) { 
    this.setState({ 
    MixData: updatedData, 
    MixError: '' 
    }); 
} else { 
    this.setState({ 
    MixData: null, 
    MixError: 'values can not go beyond one' 
    }); 
} 

それはあなたがあなたのelseブロックにあなたが実際にのみstateでMixErrorの値を返すされているように見えます。あなたのコードに基づいて、それはコピーされていないので、MixDataの値は見込めません。 MixDataの以前の値をコピーするには、スプレッドのオペレータすなわち：運のベスト

this.setState({ 
    ...this.state, 
    MixError: 'values can not go beyond one' 
}); 

を使用する必要があるだろう！