Recupero dati da API in 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
Sto recuperando i dati dall'API e ottenendo i dati. i dati stanno venendo bene ma non stanno andando in setBlog Hook. Quando consolo la risposta va bene ei dati vengono recuperati con successo ma il problema è che non sta andando in setBlog Hook. Sono nuovo a reagire e non so perché non sta andando in setBlog Hook. qualsiasi aiuto sarà apprezzato
Risposte
Ciò è dovuto alla natura asincrona dell'impostazione dello stato. Il codice che hai scritto,
.then((res) => {
console.log(res.data.data)
setBlog(res.data.data)
console.log(blog)
})
qui viene eseguito in modo sincrono e l'aggiornamento dello stato effettivo avviene solo dopo che è stato completato. se si registra in console la variabile di stato all'interno del corpo della funzione, verrà aggiornata al prossimo rendering. per esempio
const Home = () => {
const [blog, setBlog] = useState([])
console.log(blog)
.
.
.
La prima volta che viene caricato il componente, il blog
valore verrà impostato su un array vuoto (poiché viene passato come argomento a setState
). Quindi verrà chiamato il recupero dei dati e verrà impostato il valore per il blog. Ora il blog
valore sarà l'array che hai recuperato. Puoi usarlo nel rendering.
Dovrai mappare gli elementi nel blog per accedervi. Qualcosa di simile al seguente.
.
.
.
<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>
.
.
.