javascript-JS重命名对象键,同时保留其在对象中的位置

编辑：提出了与reactjs组件相关的问题,但是下面的答案可以与任何js框架/代码一起使用.

我的组件具有如下状态属性：

const someObj = {
  arr1: ["str1", "str2"],
  arr2: ["str3", "str4"],
}

用户可以通过输入字段来编辑对象(键和值).
更改值时,我将其替换在同一索引中,然后保留其位置,并且用户将编辑保留在同一位置.

更改这样的值：

handleStrChange = (e, key, strIdx) => {
  const obj = {...this.state.obj};
  obj[key][strIdx] = e.target.value;
  this.setState({
    obj
  })
}

问题是当用户更改密钥时,我无法重命名密钥,我需要删除它,然后使用新名称和旧值编写新密钥.然后obj的顺序改变,结构跳变.

像这样更改密钥：

handleKeyChange = (e, key) => {
  const obj = {...this.state.obj};
  obj[e.target.value] = obj[key]
    delete obj[key];
  this.setState({
    obj
  })
}

请看到一个有效的例子here

即使需要修改obj,如何保存结构？

还是有什么办法可以重命名密钥而不是删除和添加新密钥？

解决方法:

您可能需要考虑将键的数组减少到一个新的对象中.
为此,您还需要知道哪个键更改为什么.

>减少键的排列
>使用精简器检查密钥更改,并在必要时进行更改.
>将键值添加到对象

之后,您将拥有一个具有以前顺序的​​对象,并且可能更改后的键仍处于相同位置

这样的事情可能会起作用(未经测试)

const changedKeyMap = {"previousKey": "newKey"};
const keys = Object.keys(this.state.obj);
const content = e.target.value;
const result = keys.reduce((acc, val) => {
    // modify key, if necessary
    if (!!changedKeyMap[val]) {
        val = changedKeyMap[val];
    }
    acc[val] = content;
    // or acc[val] = this.state.obj[val] ? 
    return acc;
}, {});

如您所见,您需要跟踪更改键(changedKeyMap)的方式.
reduce函数只是以正确的顺序遍历所有键,并将它们添加到新创建的对象中.如果更改了密钥,则可以在changedKeyMap中对其进行检查并替换.它仍然会在正确的位置

标签：reactjs,javascript-objects,state-management,javascript
来源： https://codeday.me/bug/20191025/1928763.html