Estoy ejecutando el componente HorizontallScrollbar pasando datos como accesorio. Cada vez que ejecuto el componente HorizontalScrollbar, aparece el siguiente error en la pestaña de la consola de Chrome:
Error:
Uncaught TypeError: data.map is not a functionHorizontalScrollbar.js
import React from 'react'; import {Box} from '@mui/material'; const HorizontalScrollbar = ({data}) => { return ( <div> {data.map((item) => ( <Box key = {item.id || item} itemId = {item.id || item} title = {item.id || item} m = "0 40px" > {item} </Box> ) ) } </div> ) } export default HorizontalScrollbar;Pasando datos como Prop:
<Box sx = {{position: "relative", width: "100%", p: "20px"}}> <HorizontalScrollbar data = {bodyParts} /> </Box>¿Cómo se instancia bodyParts ? ¿Es un estado? Si es así, debería ser una matriz vacía por defecto []
O podría agregar una verificación antes de realizar el mapeo. Agregué una verificación Array.isArray() antes de invocar la función map() ya que es solo para Arrays.
Información adicional
Es posible que data aún no se completen debido a la espera de que se complete una llamada API o por alguna otra razón. En este caso, mi solución simplemente generaría un div vacío durante el primer procesamiento debido a la verificación y evitaría el error de la consola. Durante el próximo procesamiento, cuando los datos estén listos, los datos en este caso serían un tipo de matriz adecuado, la verificación pasaría ( Array.isArray(data) ) y los elementos representarían el componente Box correctamente.
import React from 'react'; import {Box} from '@mui/material'; const HorizontalScrollbar = ({data}) => { return ( <div> {Array.isArray(data) && data.map((item) => ( <Box key = {item.id || item} itemId = {item.id || item} title = {item.id || item} m = "0 40px" > {item} </Box> ) ) } </div> ) } export default HorizontalScrollbar;Creo que usar el doble ampersand && le da una opción.
Es decir, si no se ha llamado a la API, permanece vacía por el momento.