Java Script: установка значения для объекта по id, где id - это последняя буква объекта

Question

Что касается заголовка: он кажется немного запутанным, но это не так.

В 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 -> 1,2,3,4,5

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

Answer 1

Вы должны использовать Имена вычисляемых свойств следующим образом:

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

Answer 2

Это не проблема реакции.Вы хотите связать строку с динамической переменной.Вы можете использовать: 'someBasicStr' + dynamicVar или со строкой шаблона (es6 +): someBasicStr${dynamicVar}, любая переменная будет внутри $ {}.

Answer 3

1001 * попробовать *

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));