Soy nuevo en React y estoy usando Ant Design como marco. Hasta ahora he hecho un buen progreso en mi proyecto, poniendo en funcionamiento el backend y trabajando en el frontend con muchos componentes funcionando correctamente. ¡Feliz con el progreso hasta este punto!

Ahora estoy tratando de generar una tabla obteniendo los datos de mi API. Me las arreglé para recuperar los datos usando dentro de mi componente de clase usando:

 render(){ const workpack = fetch(process.env.REACT_APP_API_URL+'work_package') .then((response) => response.json()) .then((data) => console.log(data));

Inspeccioné el sitio y devuelve correctamente los datos de la API como:

 0: {work_package_ID: 1, work_package_name: 'Package1'} length: 1 [[Prototype]]: Array(0)

Mi problema surge cuando intento asignar los encabezados de columna de la tabla (claves) o las filas (valores).

Si uso Object.keys(workpack) u Object.values(workpack) para crear nuevas constantes extrayendo los datos, no puedo obtener los valores deseados y creo que es porque fetch ha puesto un "0" como clave delante del formación.

Al final, estoy buscando un procedimiento generalizado para generar la matriz "fuente de datos" y las matrices de "columnas" ( como se muestra en la documentación de Ant ) sin tener que copiar manualmente toda la información de mis tablas.

¿Alguna pista o referencia clara? He estado investigando durante un tiempo, pero no parece que encuentre una buena fuente.

¡Muchas gracias!