反应式JS中嵌套动态对象数组中的SetState和push对象

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中拖拽对象，并拖放布局列数组，因此我想要在列或column1数组中拖动对象的setState，所以当我一直在列或column1数组中按listItem时，同时在listItem列中更新对象时，不知道为什么！但我真的很困惑。

Answer 1

这听起来非常像是代码中有多个对同一个对象的引用，这很可能是var stateCopy = Object.assign({}, this.state.layout);的结果。这一行只简单地复制状态，这意味着状态中更深的对象和数组不会被复制，但是只有对对象的引用才会复制。因此，在执行stateCopy[layoutIndex].columns[colIndex].colum = e.payload;时，您基本上会改变原始状态。

为了避免这个问题，要么必须使用JSON.parse(JSON.stringify(state)) (似乎是不可能的)，要么必须自己实现深度复制，在那里复制所有级别的状态。