Quisiera mapear mi base de datos pero no funciona
import React, { useState,useEffect } from "react"; import TheCard from "../Components/TheCard"; import "./styles.css"; import datas from './Search' import searchTerm from './Search' import axios from 'axios'; function Card() { const [posts,setPosts]=useState([]) useEffect(() => { fetchPosts(); }, []) const fetchPosts = async () => { try { const response = axios.get('http://localhost:3000').then((value)=>{ setPosts(value.data); console.log(value) }); // console.log(response) } catch (err) { if (err.response) { // Not in the 200 response range console.log(err.response.data); console.log(err.response.status); console.log(err.response.headers); } else { console.log(`Error: ${err.message}`); } } } const data=[] for(var i in posts) { data.push(posts[i]); } if(!Array.isArray(data)){ throw new Error('expected the response to be an array(data)'); } if(!Array.isArray(posts)){ throw new Error('expected the response to be an array (posts)'); } console.log(data) return ( <div> { data.map((item, key) => <ul key={key}> <TheCard movie={item} /> </ul> )} </div> )} export default Card;Los datos son una matriz, pero cuando los mapeo obtengo esta imagen
si el script funcionaba, obtendría la URL de la imagen y cuando hago clic en ella me llevará a localhost:3000/movie/:id pero siempre obtengo localhost:3000/movie/undefined
pd: cuando consola.log datos obtengo esto: Object config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …} data: people: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] [[Prototype]]: Object headers: {content-length: '10276', content-type: 'application/json; charset=utf-8'} request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} status: 200 statusText: "OK" [[Prototype]]: Object
