SetState 并将对象推送到 React JS 中嵌套动态对象数组中的数组中

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 拖动对象并放入布局列数组中时，所以我想在 column[0] 或 column[1] 数组中设置拖动的对象，所以发生的事情是当我继续推动listItem[0] 在 column[0] 或 column[1] 数组中，然后在 listItem 列中同时更新，不知道为什么！但我超级困惑。

Answer 1

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

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