更新状态反应_JavaScript

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

最初，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更新已更改的值。

预先感谢任何指针

代替使用Object.entries尝试进行结构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});
    };

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

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

更新状态反应

问题描述

1楼

2楼