Tengo la siguiente función para mostrar subredes IP recursivamente al hacer clic en el usuario:
const traverse = (o: any) => { return o.map((item: any, key: number) => { let extra = item.hasOwnProperty("extra") ? item.extra : item; return ( <TreeItem key={key} nodeId={extra.id} icon={item.has_child ? <ChevronLeftIcon /> : ""} label={item.subnet} onClick={ extra.has_child ? (e) => loadChildren(extra, extra.id) : () => "" } > {item.child ? traverse(item.child) : ""} </TreeItem> ); }); }; Ahora puse la acción de búsqueda en loadChildren donde configuraría los datos recién obtenidos:
const loadChildren = (extra: any, id: number | string) => { setLoadingChildren(true); getIpState(id) .then((res) => { setRows({ ...rows, data: rows.data.map((item: any) => item.id == id ? { ...item, child: res.data } : item ), }); setLoadingChildren(false); }) .catch((err) => { console.log(err); setLoadingChildren(false); }); }; Ahora la pregunta es, ¿cómo puedo iterar a través de child: res.data y agregar su propio child: res.data con la respuesta de los datos recién obtenidos?
Finalmente se resolvió así:
const findClickedItem = (items: any,res: any,id:any) => { return items.map((item: any) => { let extra = item.hasOwnProperty('extra') ? item.extra : item return extra.id == id ? { ...item, child: res.data } : item.hasOwnProperty('child') ? {...item, child: findClickedItem(item.child, res, id)} : item } ) } Y se usa en loadChildren así:
const loadChildren = (id: number | string) => { setLoadingChildren(true) getIpState(id).then(res=> { setRows({ ...rows, data: findClickedItem(rows.data, res, id) }) setLoadingChildren(false) }).catch(err => { console.log(err) setLoadingChildren(false) }) }