Установить и вставить объект в массив во вложенном динамическом массиве объектов в React JS - PullRequest
Новая
       7

Установить и вставить объект в массив во вложенном динамическом массиве объектов в React JS

0 голосов
/ 28 марта 2019

У меня есть два массива с одинаковыми свойствами объектов, и я хотел обновить только данные определенного объекта из одного массива, не затрагивая второй массив объектов.

Я попытался выполнить синтаксический анализ JSON, но это не сработало, потому что яиспользуя drag n drop для данных, поэтому я хотел обновить конкретный индекс передачи объекта. 

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,не знаю почему!но я очень запутался.

1 Ответ

0 голосов
/ 28 марта 2019

Это звучит очень похоже на то, что в вашем коде есть несколько ссылок на один и тот же объект, и это, скорее всего, результат var stateCopy = Object.assign({}, this.state.layout);. Эта строка копирует состояние только поверхностно, что означает, что объекты и массивы, находящиеся глубже в этом состоянии, не будут копироваться, а будут только ссылки на объекты. Таким образом, вы в основном мутируете в исходное состояние, когда делаете stateCopy[layoutIndex].columns[colIndex].colum = e.payload;.

Чтобы избежать этой проблемы, вам либо нужно JSON.parse(JSON.stringify(state)), что кажется невозможным, либо вам нужно осуществлять глубокое копирование самостоятельно, где вы копируете все уровни своего состояния.

...