Estoy obteniendo mis datos de una API externa como de costumbre y esta es la forma típica en que lo hago:
Obtener API:
const [tshirts, setTshirts] = useState([]); const fetchData = () => { fetch('apiEndpoint') .then((response) => response.json()) .then((data) => { setTshirts(data[0].clothes.regular.top); // path to my array }) .catch((error) => { console.log(error); }); }; React.useEffect(() => { fetchData(); }, []);Mapa a través de una matriz:
const tshirtArray = tshirts.tShirt; // specifying the path const listItems = tshirtArray.map((item) => <li>{item}</li>); <ul>{listItems}</ul>Ejemplo de estructura de datos:
[ { id: 1, clothes: { regular: { top: { sleeveless: [], tShirt: [ "image-path-here" ], ..... ..... .....Cuando ejecuto el código por primera vez, funciona, pero después de un tiempo o después de actualizar la página, aparece un error de TypeError: no se pueden leer las propiedades de undefined (leyendo 'mapa')
¿Por qué es eso indefinido? La ruta es correcta y la búsqueda de la matriz también debería serlo. No puedo encontrar la razón por la que no funciona.
No tengo reputación para comentar, así que déjame intentar aclarártelo a través de una respuesta. Como mencionó @sojin, no puede usar camisetas.Camiseta ya que su estado es de tipo matriz y las matrices no se pueden usar como objetos, lo que significa que si hubiera un objeto de digamos exampleObject = { type: "shirt", color: " white } podría llamarlo con exampleObject.type.Dado que tiene una matriz de objetos en su estado (la parte superior que está guardando en el estado sigue siendo un objeto que contiene una matriz de camiseta), primero debe usar el índice (para indicar qué objeto desea desea usar de la matriz de estado) y luego puede usarlo como quisiera. Por ejemplo, en su ejemplo hay 1 objetos en la matriz de estado. Los índices de la matriz comienzan en 0. Por lo tanto, podría hacer tshirts[0].tShirt para obtener la matriz de camisetas de ese objeto.
Sin embargo, editaría un poco tu código. En lugar de usar la constante tshirtArray, solo haz listItems de tu estado:
const listItems = camisetas.map((elemento) =>
Nota: Acabo de usar el índice 0 aquí para demostrar el hallazgo del primer elemento en la matriz de camisetas. Si desea ver todas las rutas de imágenes de camisetas, es posible que deba hacer un mapeo anidado u otras soluciones similares.