在反应中的对象数组内添加新对象

Question

我在尝试将新对象添加到存储在状态中的对象数组时遇到了一点问题。

下面是存储在状态（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 循环来确保我修改了正确的对象。

Answer 1

您正在用最后更新的对象替换整个 scratchTickers 数组。

您必须先更新整个数组。

var updates = {};
updates[key] = { $set: newContent }

var newScratchTickers = update(this.state.scratchTickers, updates);

this.setState({
    scratchTickers: newScratchTickers
});

在反应中的对象数组内添加新对象

adding new object inside of array of objects in react

arrays

object

immutability

reactjs