Проблема с построением дерева react
у меня такая проблема. Я получаю с сервера массив обьектов, потом на основе их рисую дерево с помощью этой функции.
import { uniqBy, keyBy, cloneDeep, forEach, find } from 'lodash';
export const createTreeFromList = costCenters => {
if (!costCenters || !costCenters.length) return [];
const costCentersMap = keyBy(cloneDeep(costCenters), 'ID');
let root = [];
forEach(costCentersMap, curCostCenter => {
const { parentID, archived } = curCostCenter;
if (parentID) {
if (!costCentersMap[parentID].children) {
costCentersMap[parentID].children = [];
}
if (archived && curCostCenter.children) {
const match = find(costCentersMap, { ID: curCostCenter.parentID });
if (!match.children.length) {
match.children = [...curCostCenter.children];
}
match.children = [...match.children, ...curCostCenter.children];
curCostCenter.children = [];
}
const { children } = costCentersMap[parentID];
children.push(curCostCenter);
} else {
root = [curCostCenter];
}
});
return root;
};
Если обьект с флагом archived : true. То всех его детей мы переносим в родителя. Но на какой то из итерации по колекции costCentersMap[parentID].children возвращается undefined и падает ошибка. Может, кто-то подскажет как решить эту проблему. И чтоб все дерево рисовалось нормально.
Данные текстом
{
ID: "08547950-04a2-4c60-abfd-c793b368a742"
archived: false
name: "The Science Guy"
parentID: "545f15a1-6cee-4888-959d-d00ad2407335"
spenderIDs: (2) ["5e502651cc5c280d9a9a41ad", "5e507ef3dbae960d9d194604"]
}
А это один из элементов в колекции:
1db392b0-36e4-4fde-9e2c-aecc01b7bcbb: {
ID: "1db392b0-36e4-4fde-9e2c-aecc01b7bcbb"
archived: false
children: [{…}]
name: "SCRUM"
parentID: "545f15a1-6cee-4888-959d-d00ad2407335"
}
Ответы (2 шт):
Видимо есть элемент с каким-то parentID, который среди ID (еще/уже/совсем) не значится.
Бросьте исключение, посмотрите для начала:
const parent = costCentersMap[parentID]
if(!parent) throw new Error("inconsistent parentID ("+parentID+")")
Попробуйте не менять данные по месту, а формировать просто новую структуру на выходе, без архивных нод. Так, возможно, сложней ошибиться
Почему так сложно? Для начала там где у вас undefined, попробуйте использовать lodast/get
Пример:
const children = get(costCentersMap, 'parentID', {});
