Estoy tratando de representar los elementos de una matriz en la pantalla y mostrar los elementos. Así que hice la función .map. Sin embargo, cuando hago la función de mapa, dice que cars.map no es una función. Registré en la consola los elementos en la matriz de automóviles y, de hecho, estaba poblado. ¿Hay algo que estoy haciendo mal aquí? ¡Cualquier consejo ayuda! ¡Gracias!
const [cars, setCars] = useState([]);Y donde se configura la matriz de autos:
useEffect(async () => { const result = await initCarsInfo(); setCars(result); }, []); console.log(cars);Aquí está el registro de consola de autos.
{cars: Array(2)}cars: Array(2)0: {name: 'Lexus ES', year: 1995, totalMiles: 200000, …}1: {name: 'Kia Sonota', year: 2005, totalMiles: 250000, …}length: 2[[Prototype]]: Array(0)[[Prototype]]: ObjectY donde lo estoy mapeando:
const getAssetMenuItems = () => { {cars && cars.map(carObj => { return ( <MenuItem value="car1"> <span style={{ marginLeft: '10px' }}> <Typography className={classes.carsName}>{carObj.name}</Typography> <Typography>{carObj.year}</Typography> </span> </MenuItem> ) })} };Registré en la consola los elementos en la matriz de automóviles y, de hecho, estaba poblado : esto es cierto, pero no como esperaba.
Parece que los cars de su initCarsInfo devuelven un objeto que contiene los cars , no devuelve la matriz directamente.
Observe que el registro de su consola muestra que el valor de los cars es un objeto: {cars: Array(2)} .
Deberá acceder a esa propiedad desde el resultado al establecer el estado:
useEffect(async () => { const result = await initCarsInfo(); setCars(result.cars); }, []);Tienes que llamar así:
useEffect(async () => { const result = await initCarsInfo(); setCars(result.cars); }, []);