Reactjs 版本 @17.0.1 中的 useEffect()

Question

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

最后这个问题要怎么解决啊……？ 需要帮助。

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;

Answer 1

我希望你在这里了解使用地图方法的基本principle，

一般来说 (for each) 没有 return 任何东西。这意味着来自循环原始数组的数据在循环后将无法重复使用

但是map方法return另一个数组

你可以在这里阅读Map vs foreach

所以你现在做的是

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

这个语法实际上是在循环 undefined 。这将 return 什么都没有。

如果你想循环你需要使用 map 方法

{posts.map((post) => {
        return  <div>.....</div>;
  })}

Reactjs 版本 @17.0.1 中的 useEffect()

useEffect() in Reactjs version @17.0.1

javascript

reactjs

axios

use-effect

react-functional-component