狀態更新反應

我正在使用反應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鏈接看看它是否幫助你 –

狀態更新反應

回答

相關問題