Estoy tratando de hacer que una tabla de árbol se pueda reordenar arrastrando y soltando.

Aquí está el render para una visualización más fácil:

También estoy usando React-DnD .

Aquí hay una parte de mi código:

 const moveRow = useCallback( (record: StructureElement) => (dragIndex, hoverIndex) => { // console.log(record.name, dragIndex, hoverIndex); const dragRow = sortableData[dragIndex]; if (!dragRow) { console.log(sortableData, dragIndex); } else { console.log('drag', dragRow.name, 'hover', sortableData[hoverIndex].name); } // todo - change the order in array }, [sortableData], ); <StyledTreeTable components={components} dataSource={sortableData} onRow={(record, index) => { return { index, moveRow: moveRow(record as StructureElement), }; }} />

Entonces, el problema es que mi sortableData se ve así:

 [ { name: 1 }, { name: 2 }, { name: 3, children: [ { name: 11 }, { name: 22 }, { name: 33, children: [{ name: 111 }, { name: 222 }, { name: 333 }] }, ], }, ];

Entonces mis objetos pueden tener más objetos anidados en niños.

Pero la función moveRow no lo ve de esta manera. Para ello, ABSTRACT_STATE_4 es de índice 4 . Entonces, cuando trato de reordenar la matriz, trato de hacer esto: data[4] , lo que da como resultado undefined .

¿Hay alguna manera de reordenar los elementos en la tabla de árbol arrastrando y soltando que aún no haya encontrado?

La única forma que veo de resolverlo ahora es recrear la matriz de la forma en que coinciden los índices de hover y drag . Pero eso es mucho trabajo aparentemente innecesario.

¿Hay alguna manera de obtener el registro sobre el que estoy pasando el mouse, como si estuviera obteniendo hoverIndex ?