hola soy nuevo en el mundo de la programación y me he encontrado con un error que me ha dejado varado por varios días, me sale el error a la hora de llamar el empleados.map me sale el error (TypeError: empleados.map is not a function).
1 respuesta
La respuesta de tu api es un objeto y los objetos no tienen el método map.La información que requieres viene en la propiedad list
del objeto y sí es un arreglo. Lo único que necesitas hacer es cambiar empleados: datosRespuesta
por empleados: datosRespuesta.list
en la función cargarDatos().
Te adjunto un snippet de tu código funcionando al 100% que puedes ejecutar desde acá. Lo único que hice fue agregar .list
:
class Listar extends React.Component {
constructor(props) {
super(props);
this.state = {
datosCargados:false,
empleados:[]
}
}
cargarDatos (){
fetch("https://api.dailymotion.com/videos?channel=sport&limit=10")
.then(respuesta=>respuesta.json())
.then((datosRespuesta)=>{
this.setState({datosCargados:true, empleados:datosRespuesta.list})
})
.catch(console.log)
}
componentDidMount(){
this.cargarDatos();
}
render(){
const{datosCargados, empleados}=this.state
if(!datosCargados){return(<div>Cargando...</div>);}
else{
return (<table className="table">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Correo</th>
<th>Acciones</th>
</tr>
</thead>
a <tbody>
{empleados.map(
(empleado)=>(
<tr key={empleado.id}>
<td>{empleado.id}</td>
<td>{empleado.title}</td>
<td>{empleado.channel}</td>
<td>
<div className="btn-group" role="group" aria-label="">
<ReactRouterDOM.Link className="btn btn-warning" to={"/editar"}>Modificar</ReactRouterDOM.Link>
<button type="button" className="btn btn-danger">Eliminar</button>
</div>
</td>
</tr>
)
)}
</tbody>
</table>);
}
}
}
ReactDOM.render((
<ReactRouterDOM.HashRouter>
<Listar/>
</ReactRouterDOM.HashRouter>
),document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
<div id="root"></div>
console.log(datosRespuesta)
?empleados: datosRespuesta
porempleados: datosRespuesta.list
en la funcióncargarDatos()
y debe funcionar.