Блог

Главная - Вопросы по программированию - Как добавить значение дочерним элементам во вложенном массиве объектов

Как добавить значение дочерним элементам во вложенном массиве объектов

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть вложенный массив объектов, мне нужно динамически изменять значения дочерних данных

 [
    {
        type: "root",
        title: "FileManager",
        isDirectory: true,
        children: [
            {
                type: "folder",
                title: "animals",
                isDirectory: true,
                children: [
                    {
                        type: "folder",
                        title: "cat",
                        isDirectory: true,
                        children: [
                            {
                                type: "folder",
                                title: "images",
                                isDirectory: true,
                                children: [
                                    {
                                        type: "file",
                                        title: "cat001.jpg",
                                        isDirectory: false,
                                    }, {
                                        type: "file",
                                        title: "cat002.jpg",
                                        isDirectory: false,
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                type : "folder",
                title : 'Birds',
                isDirectory : true,
                children : []
            }
        ]

    }

]

это мой основной массив объектов предположим, если я хочу динамически изменять значение дочерних элементов.
давайте возьмем, что я хочу добавить еще один объект к дочерним элементам внутри массива изображений
, чтобы путь к массиву изображений был
FileManager / animals / cat / images
как можно динамически изменять значение дочерних элементов в объекте images?

Комментарии:

1. Для этого и существует state. Тем не менее, вам лучше использовать JSX. Это намного чище

2. итак, вы просто хотите изменить массив изображений, как в заголовке children array where — изображения, верно?

3. «динамически изменять значение дочерних элементов в объекте images» — это зависит от того, что, по вашему мнению, является «динамически»? Вы хотите изменить значения в событии dom, например onclick etc, или с помощью другого метода?

4. @rags2riches да, я хочу изменить дочерний массив в объекте images «динамически»

5. @PraneetDixit на самом деле это мини-проводник файлов в моем приложении react всякий раз, когда я создаю новую папку или удаляю папку, мне нужно выполнить цикл и зайти внутрь объекта и изменить его дочерние элементы, добавив или удалив объект

Ответ №1:

Основываясь на предоставленной структуре данных, вы можете использовать рекурсивное решение для доступа к интересующему вас вложенному массиву, а затем, когда рекурсия достигает base case , вы можете либо вставить новый объект / объекты в массив на этом определенном уровне глубины, либо использовать функцию обратного вызова, чтобы вставить как можно больше новых объектов в это.

Я не совсем уверен в «динамической» части, на которую вы ссылаетесь, но следующее должно направить вас в правильном направлении:

 function rec(array) {
    for (let i in array) {
        if (array[i].children === undefined) { // BASE CASE
            // console.log("base case ", array);

            // push the object you want into the array, as at this point in the
            // recursion you will be at the level you can modify your image array as you like
            return array.push({ "myImage": "myBeautifulCatImage", "does": "poooooor"});
        }

        // recursive call
        // visualise how deep you are going...
        // console.log("rec", array[i].children); 
        return rec(array[i].children); 
    }
}

rec(arr);

// if you know log your arr as in:
// console.log("arr after recursion", rec(arr))
// you will see your new cat showing where it should be :)

Если этот ответ поможет вам решить проблему, подумайте о том, чтобы принять ответ или проголосовать за него. Спасибо.

Метки: