Estoy tratando de usar datos que obtengo de una Api en un proyecto de reacción. La API devuelve una matriz con un solo objeto, pero ese objeto tiene muchas propiedades que necesito usar en jsx.
Mi pregunta es más sobre eficiencia/mejores prácticas. ¿Debería mapear la matriz o simplemente llamar al índice 0?
Esto está dentro de la devolución del componente. Solo para reiterar que la matriz solo tiene UN objeto que tiene un montón de propiedades.
array.map((obj) => ( <p>{obj.id}</p> <p>{obj.name}</p> <p>{obj.other}</p> <p>{obj.title}</p> )) or <p>{array[0].id}</p> <p>{array[0].name}</p> <p>{array[0].other}</p> <p>{array[0].title}</p>Si la API no va a cambiar y siempre devuelve una matriz con una entrada, simplemente configure su estado en consecuencia:
fetch('/api') .then(response => response.json()) .then(data => setSomething(data[0])) Si la API puede devolver varias entradas, necesitará .map() para la semántica.
Llamar al índice 0 sería un poco más eficaz que comenzar una iteración, obtener el objeto y luego detener la iteración. Sin embargo, si alguna vez espera que haya más de un objeto, necesitará un mapa.