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
    }
}

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

编辑1：这是我的codepen link

Answer 1

如果您真的不想显示州内的MixData值，我明确告诉React它是空的（或某些值使其明确用户无法递增）即：

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

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

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

祝你好运！

状态更新反应

1 个答案: