状态更新反应

我正在使用反应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

来源

2017-10-08 vihang shah

这真的令人困惑，你能澄清问题吗？ –

更新了代码让我知道它是有道理的 –

如果你真的不想显示MixData价值，你在状态有，我会明确地告诉阵营，它是零（或某个值，使得它向用户清楚它不能递增），即：

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' 
});

祝您好运！

来源

2017-10-08 18:08:00

但有一件事状态不应该更新与新的价值权利？因为我没有更新它 –

根据你的代码'状态'不应该有'MixData'值，因为你没有在'this.setState'中提供一个。然而，如果你可以提供小提琴，那么调试会更容易。 –

嘿添加codepen链接看看它是否帮助你 –

状态更新反应

回答

相关问题