Mengambil data dari api di 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

Saya mengambil data dari API dan mendapatkan data. data baik-baik saja tetapi tidak masuk ke setBlog Hook. Ketika saya memberikan respons konsol itu baik-baik saja dan data berhasil diambil tetapi masalahnya adalah tidak masuk ke hook setBlog. Saya baru bereaksi dan tidak tahu mengapa itu tidak masuk ke setBlog Hook. bantuan apa pun akan dihargai

Answer 1

Ini karena sifat asynchronous dari setting state. Kode yang telah Anda tulis,

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

di sini ia dijalankan secara serempak, dan pembaruan status sebenarnya hanya terjadi setelah ini selesai. jika Anda konsol log variabel status dalam tubuh fungsi Anda, itu akan diperbarui oleh render berikutnya. misalnya

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

Pertama kali saat komponen Anda dimuat, blognilai akan disetel ke array kosong (karena itu diteruskan sebagai argumen ke setState). Kemudian pengambilan data Anda akan dipanggil dan nilai untuk blog akan ditetapkan. Sekarang blognilainya akan menjadi array yang Anda ambil. Anda dapat menggunakan ini dalam rendering.

Anda perlu memetakan item di blog untuk mengaksesnya. Sesuatu seperti berikut ini.

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