时间戳

首页 > 解决方案 > 更新状态反应

javascript - 更新状态反应

问题描述

下图表示具有两个 ui 控件的对象，这些控件存储为 this.state.controls

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

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 来更新已更改的值。

提前感谢您的任何指点

标签： javascriptreactjs

解决方案

问题是您正在更新一个已从原始结构更改的对象（通过使用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});
};

推荐阅读