Estoy obteniendo datos de una API y mostrando los resultados. Esto funciona por un tiempo y luego recibo el siguiente error: itemList.js:23 Uncaught TypeError: items.map is not a function y también Consider adding an error boundary to your tree to customize error handling behavior.
¿Alguna idea de por qué sucede esto?
Esta es mi muestra de código:
import React, { useEffect, useState } from "react"; const ItemList = () => { const [items, setItem] = useState(""); useEffect(() => { const url = "<redacted-api-endpoint>"; const fetchData = async () => { try { const response = await fetch(url); const json = await response.json(); return setItem(json.data); } catch (error) { console.log("error", error); } }; fetchData(); }, []); return ( <> { items.map((item, index) => { const { name, title, description, image, price } = item; return ( <div key={index}> <img src={image} alt="item" width="100" height="auto" /> <p>{name}</p> <p>{title}</p> <p>{description}</p> <p>{price}</p> </div> ) }) } </> ); }; export default ItemList;useEffect(callback, dependencies) es para el gancho de efectos secundarios que se ejecuta después de que se monta el componente, administra los efectos secundarios en los componentes funcionales. argumento de devolución de llamada es una función para poner la lógica de efectos secundarios. dependencias es una lista de dependencias de su efecto secundario: ser accesorios o valores de estado. useEffect(callback, dependencies) invoca la devolución de llamada después del montaje inicial y en representaciones posteriores, si algún valor dentro de las dependencias ha cambiado.
En su renderizado primero/inicial, el componente se monta con su estado inicial, que es const [items, setItem] = useState(""); y estás mapeando sobre una cadena vacía.
Solución:
considere agregar un cortocircuito o agregue un elemento en su estado inicial para evitar el error.
<> { items && items.map((item, index) => { const { name, title, description, image, price } = item; return ( <div key={index}> <img src={image} alt="item" width="100" height="auto" /> <p>{name}</p> <p>{title}</p> <p>{description}</p> <p>{price}</p> </div> ) }) } </>eche un vistazo rápido a los documentos oficiales de reacción relacionados con useEffect hook