Javascript Reactjs版本@17.0.1中的useEffect（）

我正在开发一个MERN应用程序。在一个组件中，我需要请求一个api。我使用了axios并在useffect中使用了它&然后我使用setState将状态设置为从api获得的响应。但是状态没有更新。 我看了一些youtube教程，但他们的代码是一样的&更新状态。这是因为我正在使用新版本的react@17.0.1

最后我该如何解决这个问题需要帮助

react应用程序中的posts.js文件-

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(async () => {
    const res = await axios.get('http://localhost:5000/posts');
    console.log(res.data); // res.data is a array of objects
    setPosts(res.data);  // this is not working...

  }, []);

  return (
    <div>
      {posts.forEach((post) => {
        <ul>
          <li>{post.username}</li>
          <li>{post.content}</li>
        </ul>;
      })}
    </div>
  );
};

export default Posts;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
const Posts=（）=>{
const[posts，setPosts]=useState（[]）；
useffect（异步（）=>{
const res=等待axios.get（'http://localhost:5000/posts');
console.log（res.data）；//res.data是一个对象数组
setPosts（res.data）；//这不起作用。。。
}, []);
返回(
{posts.forEach（（post）=>{

{post.username}
{post.content}
；
})}
);
};
导出默认职位；

我希望您理解在这里使用map方法的基本原理

一般来说，

（对于每个）

不会返回任何内容。这意味着来自循环原始数组的数据在循环后将不可重用

但是

map

方法返回另一个数组

你可以在这里阅读

所以你现在做的是

{posts.forEach((post) => {
        <ul>
          <li>{post.username}</li>
          <li>{post.content}</li>
        </ul>;
      })}

---

我希望您理解在这里使用map方法的基本

原则

一般来说，

（对于每个）

不会返回任何内容。这意味着来自循环原始数组的数据在循环后将不可重用

但是

map

方法返回另一个数组

你可以在这里阅读

所以你现在做的是

{posts.forEach((post) => {
        <ul>
          <li>{post.username}</li>
          <li>{post.content}</li>
        </ul>;
      })}

---

问题不在于设置状态，而在于您试图使用forEach呈现帖子。您必须使用映射来实际创建jsx元素数组。请第一次尝试console.log render中的状态，并告诉我们如果收到数据（删除foreach），问题不在于设置状态，而是您试图使用foreach渲染帖子。您必须使用映射来实际创建jsx元素数组。请第一次尝试在render中记录console.log状态，并告诉我们是否收到数据（删除foreach）