Llamé a una API que me da una respuesta como esta,
manufacturers: [{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}] 0: {,…} 1: {,…} 2: {,…} 3: {,…} 4: {,…} 5: {,…} 6: {,…} 7: {,…} 8: {,…} 9: {,…}luego almacené esto en una matriz, que es así (en la consola, esto me da una matriz de un solo elemento, que tiene una matriz de 10 elementos):
const arrOfProducts = []; axios .get(url) .then((response) => { arrOfProducts.push(response.data.result.manufacturers); console.log(arrOfProducts); //in console this gives me a single element array, which has an array of 10 elements }) .catch((error) => { console.log(error); });Luego traté de mapearlo en mi componente React así:
<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-evenly' > {arrOfProducts.map((items,index)=>{ return <Box key={index}>{items.city}</Box> //it has multiple keys like city,name etc })} </Box>que no rinde nada. Por favor, dime qué estoy haciendo mal. También puede sugerir un mejor enfoque que este para almacenar una API.
Use reaccionar useState / setState para esto
function ProductList() { const [arrOfProducts, setArrOfProducts] = useState([]); useEffect(() => { axios.get("products").then(list => { setArrOfProducts([...arrOfProducts, ...list]); }) }) }Está creando una matriz contenedora alrededor de la respuesta innecesariamente, lo que está causando su confusión. La matriz simple de objetos y nada más está presente en la respuesta, así que solo use eso.
Como estás en React, también deberías usar un setter de estado. Algo como:
const [products, setProducts] = useState([]); useEffect(() => { axios .get(url) .then((response) => { setProducts(response.data.result.manufacturers); }) .catch((error) => { console.log(error); }); }, []); No necesita también .push el resultado a otra matriz.
Debe usar el estado para volver a renderizar el componente, simplemente presionando la matriz no se volverá a renderizar
hazlo así si estás usando un componente funcional
import React, { useState, useEffect } from 'react'; const [item, setItems] = useState([]); // Wrap api request in useEffect to make sure it only run once useEffect(() => { axios.get(url).then((response) => { setItems(existingItems => [...existingItems, response.data.result.manufacturers]); }) .catch((error) => { console.log(error); }); }, []); // Render <Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-evenly' > {items.map((item,index)=>{ return <Box key={index}>{item.city}</Box> })} </Box>