0
217
Visualizaçõescó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 Respostas
Responde à pergunta0
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;