Question

以下image表示一个对象，该对象具有两个以this.state.controls存储的ui控件

最初，statesValue值是通过在componentDidMount之前接收的数据设置的，一切都很好。但是，每个控件的状态值的更新都是通过一个事件发送的，该事件由以下函数处理

const handleValueStateChange = event => {
  
      let controls = Object.entries(this.state.controls);
      for (let cont of controls) {
        let states = cont[1].states;
        if (states) {
          let state = Object.entries(states);  
          for (let [stateId, contUuid] of state) {
            if (contUuid === event.uuid) {
              cont[1].statesValue[stateId] = event.value;
            }
          }
        }
      }
    };

它会愉快地更新值，但是要记住，更改的更新值是this.state.controls的子集，我不知道如何使用this.setState更新已更改的值。

提前感谢任何指针

Answer 1

与其尝试使用Object.entries，而是尝试进行结构分解以保留对对象的引用。看看lodash。有一些不错的帮助程序函数可以迭代诸如mapValues和mapKeys之类的对象。因此，您可以保留对象结构，而只需替换特定部分。然后用新的状态对象更新整个状态对象。

const handleValueStateChange = event => {
      let {controls} = this.state;
      controls = _.mapValues(controls, (cont) => {
        const states = cont[1].states;
        if (states) {
          _.mapValues(states, (contUuid,stateId) => {  
            if (contUuid === event.uuid) {
              cont[1].statesValue[stateId] = event.value;
            }
          });
        }
        return cont;
      });
      this.setState({controls});
    };

代码未经测试，但应该可以这样工作。

Answer 2

问题是您正在更新已从其原始结构更改的对象（通过使用Object.entries）。您仍然可以以相同的方式进行迭代，但是您需要更新一个保持原始结构的对象。试试这个：

复制controls对象。更新该对象。将其替换为state。

const handleValueStateChange = event => {
    // copy controls object
    const { controls } = this.state;
    let _controls = Object.entries(controls);
    for (let cont of _controls) {
        let states = cont[1].states;
        if (states) {
            let state = Object.entries(states);  
            for (let [stateId, contUuid] of state) {
                    if (contUuid === event.uuid) {
                        // update controls object
                        controls[cont[0]].statesValue[stateId] = event.value;
                    }
                }
            }
        }
    }
    // replace object in state
    this.setState({controls});
};

更新状态反应

2 个答案: