ReactJS動態更新狀態

我試圖根據回調函數上發送的參數動態更新組件狀態。ReactJS動態更新狀態

所以，我們的目標是，如果組件發送valueChange('id', 1) ... this.state.contractLine.id將更新爲1，如果組件發送valueChange('innerLevel.name', 'newName')this.state.contractLine.innerLevel.name將更新爲newName

這是我正在使用的代碼（但它的不像預期的那樣工作）。

valueChange(statePath, inputValue) { 
    var newState = this.state; 

    var stateBeingChanged = this.state['contractLine']; 

    var pathList = statePath.split('.'); 
     for (var i = 0; i < pathList.length; i++) { 
      var elem = pathList[i]; 
      stateBeingChanged = stateBeingChanged[elem]; 
     } 

    stateBeingChanged = inputValue; 

    newState['contractLine'] = stateBeingChanged; 

    this.setState(newState); 
}

任何想法？

編輯--SOLVED--

萬一有人有同樣的問題... 我也跟着@rauliyohmc諮詢和管理與lodash來解決問題。使用（簡單得多比我想過）的代碼是：

valueChange(statePath, inputValue) { 
    var newState = Object.assign({}, this.state['contractLine']); 

    _.set(newState, statePath, inputValue); 

    this.setState({contractLine: newState}); 
}

來源

2017-04-11 znaya

快速查看你的代碼，看起來你正在改變狀態。罪魁禍首是'var newState = this.state'，它具有將'newState'指向同一個對象引用的效果。因此，當你做'newState ['contractLine'] = stateBeingChanged''時，你正在改變'this.state'。在生成新對象之前，應該執行'var newState = Object.assign（{}，this.state）'。讓我知道這是否有幫助 – rauliyohmc

萬一有人有同樣的問題...我也跟着@rauliyohmc諮詢和管理，以解決lodash問題。使用的代碼（比我想象的要簡單得多）是：

valueChange(statePath, inputValue) { 
    var newState = Object.assign({}, this.state['contractLine']); 

    _.set(newState, statePath, inputValue); 

    this.setState({contractLine: newState}); 
}

來源

2018-03-07 14:10:42 znaya

ReactJS動態更新狀態

回答

相關問題