Javascript 从react中的api获取数据

Blog.js

import React，{useState，useffect}来自“React”
从“Axios”导入Axios
常量Home=（）=>{
const[blog，setBlog]=useState（[]）
useffect（（）=>{
loadBlog（）
}, [])
const loadBlog=async（）=>{
等待Axios(`http://localhost:3001/api/blog/get`)
。然后（（res）=>{
console.log（res.data.data）
setBlog（res.data.data）
console.log（博客）
})
.catch（（错误）=>{
console.log（错误）
})
}
返回(
反应积垢操作
添加博客
身份证件
图画
标题
简短描述
作者
行动
{blog.id}
{blog.title}
{blog.short_desc}
{blog.author}
编辑删除{“”}
)
}
导出默认主页

---

我正在从API获取数据并获取数据。数据进展顺利，但没有进入日志挂钩。当我控制台响应时，它是正常的，数据被成功地获取，但问题是它并没有进入setBlog钩子。我是新的反应，不知道为什么它并没有进入setBlog钩子。任何帮助都将被告知

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

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

在这里，它是同步执行的，而实际的状态更新只有在完成之后才会发生。如果控制台将状态变量记录在函数体中，它将在下次渲染时更新。e、 g

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

第一次加载组件时，

blog

值将设置为空数组（因为它作为参数传递给

setState

）。然后将调用您的数据获取，并设置blog的值。现在，

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

。
.
.
{blog.map（函数（条目）{
返回(
{entry.id}
{entry.title}
{entry.short_desc}
{entry.author}
编辑删除{“”}
);
})}
.
.
.
blog
是一个对象还是一组对象？你是基于
console.log（blog）
没有反映你通过
setBlog
输入的博客这一事实吗？我试图在这个答案中解释
setState
是如何工作的；希望你觉得它有用。你并不是唯一一个感到困惑的人：它是一堆的对象。当我想用博客的时候，它甚至不起作用