Javascript：通过 id 为对象设置值，其中 id 是对象的最后一个字母答案

【问题标题】：Java Script: Setting Value to the Object by id, where id is last letter of ObjectJavascript：通过 id 为对象设置值，其中 id 是对象的最后一个字母
【发布时间】：2019-09-15 14:40:05
【问题描述】：

至于标题：看起来有点混乱，其实不然。

在 React 中我正在做代码的可重用性

我有

state={
       colorObj1: {r:'0',g:'0',b:'0',a:'1'},
       colorObj2: {r:'0',g:'0',b:'0',a:'0'},
       colorObj3: {r:'0',g:'0',b:'0',a:'1'},
       colorObj4: {r:'0',g:'0',b:'0',a:'0'},
       colorObj5: {r:'0',g:'0',b:'0',a:'1'}
      }

我想要这个功能 --> 通过对象的 ID，我想将颜色设置为特定的对象。

id 值 --> 1,2,3,4,5

getSelectedColor=(color,id) => {
    this.setState({colorObj{`id`}: color})  //WRONG CODE
}

【问题讨论】：

this.setState({['colorObj' + id]: color})

标签： javascript arrays reactjs object

【解决方案1】：

您应该使用Computed property names，如下所示：

this.setState({[`colorObj${id}`]: color})

【讨论】：

【解决方案2】：

这不是反应问题。您想将字符串与动态变量连接起来。您可以使用：'someBasicStr'+dynamicVar 或模板字符串（es6+）：someBasicStr${dynamicVar}，任何变量都将在 ${} 内。

【讨论】：

所以概念名称是动态变量：D

【解决方案3】：

试试

class MyClass {
  constructor() {
    this.state={
      colorObj1: {r:'0',g:'0',b:'0',a:'1'},
      colorObj2: {r:'0',g:'0',b:'0',a:'0'},
      colorObj3: {r:'0',g:'0',b:'0',a:'1'},
      colorObj4: {r:'0',g:'0',b:'0',a:'0'},
      colorObj5: {r:'0',g:'0',b:'0',a:'1'}
    }
  }

  setSelectedColor(color,id) {
    this.state['colorObj'+id]=color;
  }

  getSelectedColor(id) {
    return this.state['colorObj'+id];
  }
}


// TEST
let c = new MyClass();
c.setSelectedColor({r:'1',g:'1',b:'1',a:'1'},6)
console.log(c.getSelectedColor(6));
console.log(c.getSelectedColor(2));

【讨论】：