Récupération des données de l'API dans React

Question

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

Je récupère des données de l'API et j'obtiens des données. les données arrivent bien mais elles ne vont pas dans setBlog Hook. Quand je console la réponse, tout va bien et les données sont récupérées avec succès, mais le problème est qu'elles ne vont pas dans le hook setBlog.Je suis nouveau pour réagir et je ne sais pas pourquoi cela ne va pas dans setBlog Hook. toute aide sera appréciée

Answer 1

Cela est dû à la nature asynchrone du réglage de l'état. Le code que vous avez écrit,

.then((res) => {
        console.log(res.data.data)
        setBlog(res.data.data)
        console.log(blog)
      })

ici, il s'exécute de manière synchrone, et la mise à jour de l'état réel ne se produit qu'une fois celle-ci terminée. si vous consignez la variable d'état dans le corps de votre fonction, elle sera mise à jour lors du prochain rendu. par exemple

const Home = () => {
  const [blog, setBlog] = useState([])
  console.log(blog)
  .
  .
  .

Lors du premier chargement de votre composant, la blogvaleur sera définie sur un tableau vide (car il est passé en argument à setState). Ensuite, votre récupération de données sera appelée et la valeur de blog sera définie. Maintenant, la blogvaleur sera le tableau que vous avez récupéré. Vous pouvez l'utiliser dans le rendu.

Vous devrez mapper les éléments du blog pour y accéder. Quelque chose comme ce qui suit.

.
.
.
<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>
.
.
.