반응에서 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>
.
.
.