javascript - 状态在 react 中更新

Question

我正在使用react 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
    }
}

我知道我所做的是可变的，我不应该这样做，但至少它不应该是我的状态，至少我应该获取状态的不可变副本

编辑1: 这是我的codepen link

Answer 1

如果你真的不想显示状态中的 MixData 值，我会明确告诉 React 它为 null(或者某个值，让用户清楚地知道它不能递增)即:

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

看起来您在 else block 中实际上只返回 state 中的 MixError 值。根据您的代码，我不希望看到 MixData 的任何值，因为它没有被复制。要复制 MixData 的先前值，您需要使用扩展运算符，即:

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

祝你好运!