Tenía una pregunta y un problema al renderizar datos Json con react js. No pude reaccionar para mapear los datos. Aquí está mi código:
Mi Json:
res.json({ list: [{id: 1, name: 'Caleb'}, {id: 2, name: 'Isaiah'}] })Mi código de reacción:
import { useState, useEffect } from 'react' function App() { const [data, setData] = useState({}) useEffect(() => { fetch("/home") .then(res => res.json()) .then(data => setData(data)) }, []) return ( <div> {data.list.map(function(d, idx){ return (<li key={idx}>{d.name}</li>) })} </div> ); } export default App;Me está dando este error, que no puede representarlo correctamente.
La forma más sencilla de lograr su objetivo es usar la representación condicional (&&), puede poner los datos JSON en una variable, pero no es necesario. Otra mejora es usar la identificación del objeto como clave y no como índice.
Aquí hay un ejemplo de cómo mejorar su código:
import { useState, useEffect } from 'react'; function App() { const [data, setData] = useState({}); useEffect(() => { fetch("/home") .then(res => res.json()) .then(data => setData(data)) }, []) return ( <div> {data.list && ( data.list.map(function (d) { return <li key={d.id}>{d.name}</li>; }) ) </div> ); } export default App;Lo arreglé colocando primero los datos de Json en una variable, luego me aseguré de que la variable no estuviera indefinida y luego la representé. Como esto:
import { useState, useEffect } from 'react' function App() { const [data, setData] = useState({}) useEffect(() => { fetch("/home") .then(res => res.json()) .then(data => setData(data)) }, []) const new_data = data.list; const renderAuth = () => { if (new_data !== undefined) { return ( <div> {new_data.map(function(d, idx){ return (<li key={idx}>{d.name}</li>) })} </div> ); } else { console.log("sorry had problems") } } return ( <div> {renderAuth()} </div> ); } export default App;¡Entonces funcionó a las mil maravillas! Sin problemas en absoluto.