Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

204
Vistas
Why do I get undefined when I try to map a Json array using react?

I would like to map my DB but it doesn't work

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;

The data is an array but when I map it I get this img

if the script was working, I would get the URL of the image and when I click on it it will take me to localhost:3000/movie/:id but I always get localhost:3000/movie/undefined

ps: when i console.log data i get this: 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

my bd

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda