Question

我有一个以状态保存的对象数组，并且数组中的每个对象在对象上都有另一个数组。

这是一个单个对象的示例：

            id       : uuid.v1(),
            area     : 'Scratch',
            name     : 'Untitled',
            status   : "",
            size     : "",
            created  : {
                name : "username",
                time : new Date()
            },
            modified : {
                name : "username",
                time : new Date()
            },
            content: [{
                id        : uuid.v1(),
                Content   : "Content 1",
                TowerRed  : "",
                TowerText : "text"
            },
            {
                id        : uuid.v1(),
                Content   : "Content 2",
                TowerRed  : "",
                TowerText : "text"
            }]

我需要能够从这些对象内部的内容数组中删除一个对象。

例如，我需要删除包含'content 1'的对象，而不修改包含'content 2'

的对象

我试图使用她的反应不变性助手，但没有成功。

这里我遍历父对象和内容对象，直到找到与'itemID'（itemID）匹配的是我想要从内容数组中删除的对象的id。

     var tickerIndex = null;
        var tickerItemIndex = null;

        for (var i = 0; i < this.state.scratchTickers.length; i++) {

            var tickersContent = this.state.scratchTickers[i].content;
            tickerIndex = i;

            for (var x = 0; x < tickersContent.length; x++) {
                if (tickersContent[x].id == itemID) {                   
                    tickerItemIndex = x;
                }           
            }
        }

然后我创建了对父对象及其内容数组的引用：

var item = this.state.scratchTickers[tickerIndex].content;

最后，我使用update immuatbility帮助拼接数组并根据其itemID删除正确的对象：

this.setState ({
        scratchTickers: update(item, {
            $splice: [[tickerItemIndex, 1]]
        })
    })

但这似乎不起作用。

这是整个功能：

_deleteTickerItem: function(itemID) {
        var tickerIndex = null;
        var tickerItemIndex = null;

        for (var i = 0; i < this.state.scratchTickers.length; i++) {

            var tickersContent = this.state.scratchTickers[i].content;
            tickerIndex = i;

            for (var x = 0; x < tickersContent.length; x++) {
                if (tickersContent[x].id == itemID) {                   
                    tickerItemIndex = x;
                }           
            }
        }

        var item = this.state.scratchTickers[tickerIndex].content;

        this.setState ({
            scratchTickers: update(item, {
                $splice: [[tickerItemIndex, 1]]
            })
        })

    },

Answer 1

您的On Invalid Data来电似乎覆盖了setState个数据，只包含一个scratchTickers scratchTicker {/ 1}}的值。

您实际上要做的是将<{1}}数组映射到具有过滤器 ed内容的新数组。

content

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

更新

渲染时，请确保您使用的迭代器是否未使用数组索引作为键，如下所示。

scratchTickers

当React在更改时与虚拟DOM进行差异时，它将查看键以确定更改的内容。因此，如果您正在使用索引并且数组中只有一个，那么它将删除最后一个。相反，请使用_deleteTickerItem: function(itemID) { this.setState({ scratchTickers: this.state.scratchTickers.map(scratchTicker => Object.assign({}, scratchTicker, { content: scratchTicker.content.filter(content => content.id != itemID) }) ) }); }的{{1}}作为键，如下所示。

// bad {content.map((content, index) => <p key={index}>{content.Content}</p> )}

在反应中从数组中删除对象

1 个答案: