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

快速查看你的代码，看起来你正在改变状态。罪魁祸首是'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}); 
}

ReactJS动态更新状态

相关推荐