반응에서 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 Hook에 들어 가지 않습니다. 내가 콘솔 응답을 할 때 괜찮고 데이터를 성공적으로 가져 왔지만 문제는 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>
.
.
.