Как обновить элемент массива в React?

Question

Мне нужно обновить одно из свойств элемента внутри массива, используя React's immutability helpers.

У меня есть что-то вроде этого:

this.setState(React.addons.update(this.state.collection[index], { 
    property: { $set: !this.state.collection[index].property } 
})); 

Где index на самом деле индекс элемента в коллекции, и property это логическое значение, я пытаюсь переключить.

Проблема заключается в коде не модифицируя элемент property, но property свойства в this.state объекте - так он получает что-то вроде {collection: [...], property: true}.

На Nested Collections он говорит, что я должен использовать хэш с индексом элемента в качестве ключа, но я его в переменной, поэтому он получает немного неоднозначное:

this.setState(React.addons.update(this.state, { 
    collection: { 
    index: { 
     property: { $set: !this.state.collection[index].property } 
    } 
    } 
})); 

Это действительно дает мне ошибку Cannot read property 'property' of undefined - то есть this.state.collection не имеет свойства index, что является истинным.

Как я могу это достичь?

Я уже знаю, что я должен использовать $apply вместо $update - но это не точка здесь :)

Answer 1

Вы можете использовать динамические свойства, чтобы использовать значение переменной index в качестве имени свойства:

this.setState(React.addons.update(this.state, { 
    collection: { 
    [index]: { // <-- 
     property: { $set: !this.state.collection[index].property } 
    } 
    } 
})); 

Это новое в ES2015.