• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

187
Views
cómo hacer una lista en reaccionar usando api

ingrese la descripción de la imagen aquí >Objetivo

Para representar la lista obtenida de la API ficticia.

El código

Aplicación.js

 import logo from './logo.svg'; import Header from './components/Header'; import MapArea from './components/MapArea'; import Card from './components/Card'; import './App.css'; import React from "react"; class App extends React.Component { constructor(e){ super(); this.state = { menu:false, userData:[] } } componentDidMount() { fetch("https://reqres.in/api/users?page=2") .then((a)=>{return a.json()}) .then((b)=>{ this.setState({ userData:b }) }) }

Tarjeta.js

 function Card(props){ let userData = props.data.userData.data; console.log(userData) //Sometimes WORKING FINE return(<div>{userData.map((item)=>{<h1 key={item.id}>item.id</h1>})}</div>) } export default Card;

El problema

Ahora, la cosa es que a veces el archivo console.log funciona y otras veces no. Luego, tengo que eliminar el javascript "{}" en el método de procesamiento de Card.js y guardarlo y volver a pegarlo y guardarlo. También agregué una imagen de la consola cuando el archivo console.log no funciona.

Además, la lista no se procesa.

about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Su estado inicial es incorrecto. La API ficticia devuelve la matriz debajo del campo "datos", por lo que debe hacer coincidir esa estructura en el estado inicial.

 this.state = { menu:false, userData:{ data: [] } }
about 3 years ago · Juan Pablo Isaza Report

0

La devolución de llamada para .map() no devuelve nada. Las funciones de flecha solo tienen un retorno implícito si no hay llaves alrededor de la función. Así que quita las llaves:

 userData.map((item) => <h1 key={item.id}>item.id</h1>)

o agregue un retorno explícito:

 userData.map((item) => { return <h1 key={item.id}>item.id</h1>; })
about 3 years ago · Juan Pablo Isaza Report

0

@kalpeshshende su console.log "no funciona" porque su estado inicial no tiene la misma estructura que el json devuelto por la API. Recomiendo cambiar su componenteDidMount

 componentDidMount() { fetch("https://reqres.in/api/users?page=2") .then((a)=>{return a.json()}) .then((b)=>{ this.setState({ userData:b?.data ?? [] }) })

y el interior del componente: let userData = props.data.userData; o const {userData} = props.data;

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error