在反应中从api获取数据答案

【问题标题】：Fetching data from api in react在反应中从api获取数据
【发布时间】：2020-08-20 14:36:29
【问题描述】：

博客.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 挂钩。任何帮助将不胜感激

【问题讨论】：

blog 是一个对象还是一个对象数组？
您是否基于 console.log(blog) 没有反映您通过 setBlog 发布的博客这一事实？
我试图解释setState 在这个答案中的工作原理；希望你觉得它有用。你不是唯一一个感到困惑的人：stackoverflow.com/a/62460109/119549
它是对象数组
是的，当我想使用 blog.something 时它甚至无法正常工作

标签： javascript reactjs axios react-hooks

【解决方案1】：

这是因为设置状态的异步特性。你写的代码，

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

【讨论】：

那有什么解决办法