3

Estoy implementando una practica para mostrar los datos obtenidos del Backend y mapearlos.Tengo el siguiente array de objetos con el que realizo mis pruebas:

const test = [
    {id: 10, value: "Tema1", },
    {id: 20, value: "Tema2", },
    {id: 30, value: "Tema3", },
    {id: 40, value: "Tema4", },
];

Lo mapeo de la siguiente forma:

{test.map(({id, value}) => (
  <p key={id}>
   {value}
  </p>
 ))}

Todo resulta correcto, pero cuando quiero mapear los datos que me llegan del Backend, no los muestra. Así obtengo los datos:

const response = await GetTopics(); // Respuesta del Backend
arrayTopics = response.data.topics; // Obtengo array
console.log(arrayTopics);

Este es el array que imprime:

introducir la descripción de la imagen aquí

Es un array de arrays, lo que quiero hacer es tener los datos por 'id' y 'value' como en mi variable test y mapearlos, pero no resulta, esto es lo que tengo para intentar darle esa forma:

const response = await GetTopics(); // Respuesta del Backend
arrayTopics = response.data.topics; // Obtengo array
console.log(arrayTopics):

// Continua el código...
const topics = [];
for(let element of arrayTopics){
   topics.push({ id: element[0], value: element[1]},)
}
console.log(topics)

Después de realizar el código anterior obtengo un array de objetos, igualito a mi variable test:

introducir la descripción de la imagen aquí

Pero al mapearlos no me muestra nada, es como si estuviera vacio. Agradeceria mucho cualquier aportación, no me cierro a aprender otras formas de solucionarlo. Gracias por su tiempo :)

7
  • topics debe ser una variable de estado en el componente, hay que hacer el set correspondiente, luego se mapea topics justo como haces con test
    – g.4
    el 5 ene. 2022 a las 4:26
  • con los estados lo intente de esta forma: const [ topics, setTopics ] = useState( [] ); y en vez de usar el push lo cambio por el setTopics: setTopics( [ { id: element[0], value: element[1] } ] ) pero solo me muestra el ultimo y mi variable topics se queda vacia, como si no hubiera agregado nada el 5 ene. 2022 a las 6:52
  • Podrías editar tu pregunta y agregar tu array que llega desde tu backend para poder hacer unas pruebas, tal vez necesitas usar Object.keys
    – Daniel
    el 5 ene. 2022 a las 18:09
  • Ya esta incluida la imagen del array que llega desde mi backend bro. Es la primera imagen que adjunto. Es un array de arrays lo que llega el 5 ene. 2022 a las 22:00
  • @JoseMiguelLopez me refiero a que pegues el código de la imagen, no es necesario usar imágenes en este caso, porque son JSON diferentes al que pones al inicio y el de tu imagen
    – Daniel
    el 5 ene. 2022 a las 22:57

1 respuesta 1

0

Yo probaría lo siguiente:

import {useState} from 'react';

const response = await GetTopics(); // Respuesta del Backend
arrayTopics = response.data.topics;

//Inicializamos el valor de test con arrayTopics
const [test, setTest] = useState(arrayTopics)

{
  test.map((t) => {
   return (
    <p key={t.id}>
     {t.value}
    </p>
   )
})}

Espero que te sirva 👌

1
  • Lo acabo de intentar asi como usted sugiere, pero no muestra nada, creo es porque estoy pasando directamente el array que me llega y no asigno el id y value el 5 ene. 2022 a las 22:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.