Obteniendo datos de api en react
Blog.js
import React, { useState, useEffect } from "react"
import Axios from "axios"
const Home = () => {
const [blog, setBlog] = useState([])
useEffect(() => {
loadBlog()
}, [])
const loadBlog = async () => {
await Axios.get(`http://localhost:3001/api/blog/get`)
.then((res) => {
console.log(res.data.data)
setBlog(res.data.data)
console.log(blog)
})
.catch((err) => {
console.log(err)
})
}
return (
<>
<div className="container">
<div className="col-lg-10">
<h2> React CRUD Operation </h2>
</div>
<div className="col-lg-2">
<button> Add Blog </button>
</div>
<table className="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Picture</th>
<th>Title</th>
<th>Short Description</th>
<th>Author</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>{blog.id}</td>
<td>
<img src={"../../../public/logo512.png"} alt="not available" />
</td>
<td>{blog.title}</td>
<td>{blog.short_desc}</td>
<td>{blog.author}</td>
<td>
<button>Edit</button> <button>Delete</button>{" "}
</td>
</tr>
</tbody>
</table>
</div>
</>
)
}
export default Home
Estoy obteniendo datos de API y obteniendo datos. los datos están llegando bien pero no en setBlog Hook. Cuando consuelo la respuesta, está bien y los datos se recuperan con éxito, pero el problema es que no van en setBlog Hook. Soy nuevo en reaccionar y no sé por qué no van en setBlog Hook. cualquier ayuda será apreciada
Respuestas
Esto se debe a la naturaleza asincrónica del estado de configuración. El código que has escrito
.then((res) => {
console.log(res.data.data)
setBlog(res.data.data)
console.log(blog)
})
aquí se ejecuta de forma sincrónica, y la actualización del estado real ocurre solo después de que se completa. si la consola registra la variable de estado dentro del cuerpo de su función, se actualizará en la próxima representación. p.ej
const Home = () => {
const [blog, setBlog] = useState([])
console.log(blog)
.
.
.
La primera vez que se carga su componente, el blog
valor se establecerá en una matriz vacía (ya que se pasa como argumento a setState
). Luego, se llamará a la recuperación de datos y se establecerá el valor para el blog. Ahora el blog
valor será la matriz que obtuvo. Puede usar esto en el renderizado.
Deberá mapear los elementos en el blog para acceder a él. Algo parecido a lo siguiente.
.
.
.
<tbody>
{blog.map(function (entry) {
return (
<tr>
<td>{entry.id}</td>
<td>
<img src={"../../../public/logo512.png"} alt="not available" />
</td>
<td>{entry.title}</td>
<td>{entry.short_desc}</td>
<td>{entry.author}</td>
<td>
<button>Edit</button> <button>Delete</button>{" "}
</td>
</tr>
);
})}
</tbody>
.
.
.