Como pueden notar en el código que les dejo mas abajo, la petición de los datos es correcto, pero en el render hice un console.log(this.state.tareas.results)
para verificar esto!, pero vi algo extra al momento de que esta linea es ejecutada, pues se ejecuta dos veces en la consola.
No se si es un problema de render u otra cosa por el estilo, pero por cierto les digo que el método fetch
es correcto, pero lo raro, es que al momento de mapear el estado, este no me muestra el resultado de los datos que estoy pidiendo mostrándome este mensaje, lo que busco es poder imprimir el contenido que me aparece en el console.log
dentro del DOM, y ahi es donde esta el problema.
En resumen, el problema de mi aplicación ocurre cuando se empieza a leer la linea 77 del mapeo
import React from 'react';
import AddTasks from './addTask';
export default class Tasks extends React.Component {
constructor(props) {
super(props);
this.state = {
ediTask: {content: '', date: ''},
tareas: [],
};
}
componentDidMount(){
this.obtenerTareas();
}
obtenerTareas = () => {
const tareas = 'https://academlo-todolist.herokuapp.com/tasks';
fetch(tareas)
.then(response => response.json())
.then(myJson => {
this.setState({ tareas: myJson });
console.log(myJson);
})
.catch(error => console.log(error));
};
render() {
console.log(this.state.tareas.results)
return(
<div className="todos">
<AddTasks />
{this.state.tareas.map((tarea, i) => {
return (
<div className="card-group">
<div className="card mt-4 ml-2 bg-dark text-white">
<div className="card-body">
<li key={i}>{tarea.content}</li>
</div>
</div>
</div>
);
})}
</div>
);
}
}