0
214
Vistascómo hacer una lista en reaccionar usando api
>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.
3 Respuestas
Responde la pregunta0
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: [] } }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>; })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;