React'te API'den veri alınıyor

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

API'den veri alıyorum ve veri alıyorum. veriler iyi geliyor ancak setBlog Hook'a gitmiyor. Konsol yanıtını verdiğimde sorun yok ve veriler başarıyla getiriliyor ancak sorun setBlog kancasına gitmiyor. Tepki vermek için yeniyim ve neden setBlog Kancasına gitmediğini bilmiyorum. herhangi bir yardım takdir edilecektir

Answer 1

Bunun nedeni, ayar durumunun eşzamansız doğasıdır. Yazdığınız kod,

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

burada eşzamanlı olarak yürütülür ve gerçek durum güncellemesi yalnızca bu tamamlandıktan sonra gerçekleşir. Durum değişkenini işlev gövdenizde konsolda günlüğe kaydederseniz, bir sonraki render ile güncellenecektir. Örneğin

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

Bileşeniniz ilk kez yüklendiğinde, blogdeğer boş diziye ayarlanacaktır (çünkü bu, argüman olarak iletilir setState). Ardından veri getirme işleminiz çağrılacak ve blogun değeri ayarlanacaktır. Şimdi blogdeğer, getirdiğiniz dizi olacaktır. Bunu işlemede kullanabilirsiniz.

Erişmek için blogdaki öğeleri eşlemeniz gerekir. Aşağıdaki gibi bir şey.

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