Reactjs 版本 @17.0.1 中的 useEffect()答案

【问题标题】：useEffect() in Reactjs version @17.0.1Reactjs 版本 @17.0.1 中的 useEffect()
【发布时间】：2021-05-05 14:04:30
【问题描述】：

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

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

react app 中的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;

【问题讨论】：

问题不在于 setState 问题在于您正在尝试使用 forEach 呈现帖子。您必须使用地图来实际创建一个 jsx 元素数组。
第一次尝试控制台记录渲染内部的状态并告诉我们您是否收到数据（删除foreach）

标签： javascript reactjs axios use-effect react-functional-component

【解决方案1】：

希望你了解这里使用map方法的基本principle，

一般来说(for each) 不会返回任何内容。这意味着循环原始数组的数据在循环后将无法重用

但是map 方法返回另一个数组

你可以在这里阅读Map vs foreach

所以你现在做的是

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

这个语法实际上是循环 undefined 。这不会返回任何内容。

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

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

【讨论】：