时间戳

首页 > 解决方案 > Reactjs 版本 @17.0.1 中的 useEffect()

javascript - Reactjs 版本 @17.0.1 中的 useEffect()

问题描述

我正在开发一个 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;

标签： javascriptreactjsaxiosuse-effectreact-functional-component

解决方案

我希望您在principle这里了解使用 map 方法的基础知识，

一般来说(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>;
  })}

推荐阅读