反応でAPIからデータを取得する

Aug 20 2020

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からデータを取得して取得しています。データは正常に機能していますが、setBlogフックには表示されません。私が応答をコンソールすると、それは問題なく、データは正常にフェッチされますが、問題はそれがsetBlogフックに入れられないことにあります。私は反応するのが初めてで、なぜそれがsetBlogフックに入れられないのかわかりません。どんな助けでも感謝されます

回答

1 KennyJohnJacob Aug 20 2020 at 21:49

これは、状態の設定が非同期であるためです。あなたが書いたコード、

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

ここでは同期的に実行され、実際の状態の更新はこれが完了した後にのみ行われます。関数本体内の状態変数をコンソールログに記録すると、次のレンダリングで更新されます。例えば

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

コンポーネントが初めてロードblogされるとき、値は空の配列に設定されます(これは引数としてに渡されるためsetState)。次に、データフェッチが呼び出され、ブログの値が設定されます。これで、blog値はフェッチした配列になります。これをレンダリングで使用できます。

ブログにアクセスするには、ブログ内のアイテムにマップする必要があります。次のようなもの。

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