Estoy tratando de construir un componente que funcione como un árbol de selección, pero con la posibilidad de que los usuarios editen cada fila en el árbol de selección.
Básicamente, un componente en el que puede seguir profundizando para obtener más detalles.
Los datos están estructurados como un objeto anidado, donde un elemento con posibilidades de desglose tiene un hijo como se muestra a continuación.
const [categories, setCategories] = useState([ { name: "First Tier", identifier: "1", children: [ { name: "Second Tier", identifier: "2", children: [ { name: "Third Tier", identifier: "3", children: [ { name: "Fourth Tier", identifier: "4", children: [{ name: "Fifth Tier", identifier: "5" }], }, ], }, ], }, ], }, { name: "Another top tier", identifier: "6" }, { name: "a Third top tier", identifier: "7" }, ]);Mi desafío es que parece que no puedo encontrar una manera de modificar al niño y los accesorios como deseo. Como ejemplo, me gustaría poder modificar el nombre del quinto niño a algún nombre aleatorio. Nota: deseo poder modificar cualquier niño y tendré el identificador disponible.
Como estoy usando reaccionar, debe hacerse usando "useState", lo que lo hace un poco más complicado según mi entendimiento.
¿Alguna idea o alguien ha pasado por este desafío?
A continuación se presenta una posible forma de lograr el objetivo deseado.
Fragmento de código
const findAndUpdate = (id, val, arr) => { // find 'arr' element with matching identifier const tgtObj = arr.find( ({ identifier }) => identifier === id ); if (tgtObj) { // found identifier, so update the name tgtObj.name = val; // this will mutate the original array passed as argument } else { // not found, recurse through 'children' array arr.filter(el => 'children' in el).forEach( ({ children }) => findAndUpdate(id, val, children) ); }; return arr; // in all cases, return 'arr' as-is }; const stateArr = [ { name: "First Tier", identifier: "1", children: [ { name: "Second Tier", identifier: "2", children: [ { name: "Third Tier", identifier: "3", children: [ { name: "Fourth Tier", identifier: "4", children: [{ name: "Fifth Tier", identifier: "5" }], }, ], }, ], }, ], }, { name: "Another top tier", identifier: "6" }, { name: "a Third top tier", identifier: "7" }, ]; // the 'stateArr' will be mutated by using this method console.log( 'find id: 5 and update name: "New Fifth Tier"... ', findAndUpdate("5", "New Fifth Tier", stateArr) ); // to call this using "setCategories", simply try this: /* setCategories(prev => findAndUpdate("5", "New Fifth Tier", prev)); */ .as-console-wrapper { max-height: 100% !important; top: 0 }Explicación
Se agregaron comentarios en línea al fragmento anterior.