Para empezar soy un principiante. Cualquier ayuda sería apreciada. Así que obtengo mis datos de mongoDB atlas usando node+express API. Logré que la matriz apareciera en el registro de la consola usando el siguiente código.
const [product, setProduct] = useState(); const url = "http://localhost:5000/api/items"; useEffect(() => { axios.get(url).then((res) => { setProduct(res.data); // setProduct( // JSON.stringify({ // title: setProduct.title, // price: setProduct.price, // image: setProduct.image, // details: setProduct.details, // }) // ); }) }, [url]) console.log(product)El registro de la consola muestra la matriz correctamente como una colección llamada 'elementos' con contenido de matrices. Como puede ver, traté de secuenciar la respuesta ya que la respuesta devuelve JSON, pero nuevamente no sabía cómo mapear. El siguiente es el código donde traté de mapear los contenidos como id, nombre, etc. como accesorios para el componente.
<div> {product.map((product) => { <Product name={product.title} /> })} </div>Cuando hago esto, aparece el error de que el mapa no es una función. No sé qué estoy haciendo mal aquí. Sé que se supone que debo usar redux o reducer/context aquí, pero quiero que esto funcione antes de actualizarlo con esos.
[![Respuesta de res.data][1]][1] [1]: https://i.stack.imgur.com/auxvl.png
En el primer procesamiento, el valor de los tipos no estará definido (en la ejecución del código de sincronización), intente usarlo como
<div> {product?.map((product) => { <Product name={product.name} /> })} </div>? se asegurará de ejecutar el mapa una vez que el valor de los tipos esté allí (también asegúrese de que sea mapeable (es una matriz))
no recibiste tus productos.
Como podemos ver en la captura de pantalla
res.data igual al objeto con items de una propiedad: res.data = {items: []} y necesitamos tomar/acceder a estos elementos
usa esto: setProducts(res?.data?.items || [])
const [products, setProducts] = useState(); useEffect(() => { axios.get(url).then((res) => { setProducts(res?.data?.items || []); }) }, [url]) <div> {products?.map((product) => { <Product name={product.title} /> })} </div>