У меня возникает небольшая проблема при попытке добавить новый объект в массив объектов, который хранится в состоянии.
Ниже приведен пример объекта, который хранится в состоянии (scratchTickers):
id : uuid.v1(),
area : 'Scratch',
name : 'Untitled',
status : "",
size : "",
created : {
name : "username",
time : new Date()
},
modified : {
name : "username",
time : new Date()
},
content: [{
content: "Dummy content",
TowerRed: "",
TowerText: "Headlines"
}]
Мне нужно динамически добавлять новые объекты в массив контента, объект структурирован следующим образом:
{
content: "Dummy content",
TowerRed: "",
TowerText: "Headlines"
}
Я пытаюсь использовать помощников по неизменяемости React для достижения этого, но он, похоже, не работает так, как должен.
вот моя функция добавить новый объект в массив содержимого и обновить состояние:
_createTickerItem: function (id) {
var tickerID = id;
var key = null;
for (var i = 0; i < this.state.scratchTickers.length; i++) {
if(this.state.scratchTickers[i].id == tickerID) {
var ticker = this.state.scratchTickers[i];
var key = i;
}
}
var blankContent = ({
content: "Ticker Content",
TowerRed: "",
TowerText: "Headlines"
});
var oldContent = this.state.scratchTickers[key];
var newContent = update(oldContent, {
content : {
$push : [blankContent]
}
});
this.setState({
scratchTickers: newContent
});
},
Поэтому, когда я нажимаю кнопку tun, запускаю функцию _createTickerItem
компонент повторно отображает и основной объект полностью исчезает.
Редактирование * Хорошо, поэтому я теперь на шаг дальше, чтобы установить 'newContent' в качестве массива во время состояния установки, теперь добавляет новые объекты в массив содержимого и корректно отображает их.
this.setState({
scratchTickers: [newContent]
});
Однако, если в состоянии было несколько объектов, это заменит их все на отдельные объекты одним объектом. Итак, как бы это работало, если бы я сказал родительским объектам в состоянии, но хотел просто изменить массив содержимого объекта 1?
Изменить 2: я должен добавить, что scratchTickers
- это массив объектов, поэтому цикл for необходим, чтобы убедиться, что я изменяю правильный объект.
Вы заменяете весь массив scratchTickers
только последним обновленным объектом.
Сначала вам нужно обновить весь массив.
var updates = {};
updates[key] = { $set: newContent }
var newScratchTickers = update(this.state.scratchTickers, updates);
this.setState({
scratchTickers: newScratchTickers
});
scratchTickers
наnewContent
. Вы должны установить новый контент в ключеcontent
и переустановить scratchTickers. Имеет смысл?