Как реализовать подгрузку данных в дерево элементов?
Всем привет!
Нужна помощь, а то уже не варит голова…
Есть массив объектов
[{«id»: 100, «name»: «Германия», «parent»: null},
{«id»: 200, «name»: «Япония», «parent»: null},
{«id»: 300, «name»: «США», «parent»: null}]
По клику запрашиваю с бэка дочерние списки (массивы объектов), у которых есть свой ID и ID родителя, например запросив по id 100 получу
[{«id»: 120, «name»: «Берлин», «parent»: 100},
{«id»: 140, «name»: «Мюнхен», «parent»: 100}]
И такая вложенность может быть неограниченной… Подскажите, как лучше на реакте реализовать дерево вложенных элементов с подгрузкой каждого уровня вложенности у каждого элемента по клику аяксом… Сейчас запрос и получение данных отрабатывает, как выводить пока не понимаю
Есть разные варианты.
Классический реактовский сюжет - когда для каждого объекта рендерится компонент TreeItem, который отрабатывает клик и по клику сам загружает массив своих дочерних объектов. Этот массив хранится в локальном стейте. Но если дерево может не только разворачиваться, но и сворачиваться, то рендерить дочерние элементы не надо, и они размонтируются, с пропажей стейта - потом придется грузить заново. Если это беспокоит, то надо подумать о кэшировании. Или, например, использовать ReactQuery - он сам кэширует.
Если надо хранить весь набор данных вместе, то воспользуйся стейт-манагером. МобХ позволяет держать мутабельное дерево, в редаксе лучше нормализованный вид (чтобы не было лишних перерендеров).
Средний