Question

我有两个具有相同对象属性的数组，我想只更新一个数组中的特定对象数据，而不影响第二个对象数组。

我尝试了JSON解析，但是由于我对数据使用了拖放操作，因此无法正常工作，因此我想更新特定的对象传递索引。

this.state = {
           listItem: [
            // This data will be static 
                { data: `Text`, content: 'Insert you text here...' },
                {
                    data: `Column`,
                    content: 'Column',
                    columns: [
                        {
                            column: []
                        },
                        {
                            column: []
                        }
                    ]
                }
            ],
           layout:[
           // The data below might be more than 3-4 times repetitive 
            {
                    data: `Column`,
                    content: 'Column',
                    columns: [
                        {
                            column: []
                        },
                        {
                            column: []
                        }
                    ]
                }     
            ]
}

// Set State function I tried recently 
onColumnDrop(e, layoutIndex, colIndex) {

        if (e.removedIndex !== null || e.addedIndex !== null) {

            var stateCopy = Object.assign({}, this.state.layout);
            stateCopy[layoutIndex].columns[colIndex].column = e.payload;
            this.setState({ stateCopy });

        }
    }

所以，基本上，功能是当我从listItem中拖动对象并放入布局列数组中时，所以我想设置setState来将对象拖动到column [0]或column [1]数组中，所以发生的事情是当我不断推动在column [0]或column [1]数组中的listItem [0]，然后同时在listItem列中对其进行更新，不知道为什么！但是我很困惑。

Answer 1

这听起来很像您在代码中对同一个对象有多个引用，并且很可能是var stateCopy = Object.assign({}, this.state.layout);的结果。该行仅浅层复制状态，这意味着不会复制状态内较深的对象和数组，而只会复制对对象的引用。因此，当您进行stateCopy[layoutIndex].columns[colIndex].colum = e.payload;时，基本上就可以改变原始状态。

为避免此问题，您要么必须JSON.parse(JSON.stringify(state))（似乎不可能），要么必须自己进行深度复制，在该状态下复制状态的所有级别。

在React JS中嵌套动态对象数组中的SetState和push对象

1 个答案: