为什么我的反应使用效果挂钩不工作 (use effect in react)

我重新发布了一个问题,我问了一个星期前,我离开了我采取的步骤来解决这个问题。我正在一个简单的 MERN 应用程序关闭一个教程,使用效果函数不会将内容呈现到页面上。这里是代码:

我重新发布了一个问题,我问了一个星期前,我离开了我采取的步骤来解决这个问题。我正在一个简单的 MERN 应用程序关闭一个教程,使用效果函数不会将内容呈现到页面上。这里是代码:

App.js 文件

import './App.css';
import { useState, useEffect } from 'react';
import Axios from 'axios';
function App() {
  const [listOfUsers, setListOfUsers] = useState([]);
  useEffect(() => {
    Axios.get("http://localhost:3001/getUsersFakeDataGen").then((response) => {
      setListOfUsers(response.data)
    })
  }, [])
  return (
    <div className="App">
      <div className="usersDisplay">
        {listOfUsers.map((user) => {
          return (
            <div>
              <h1>Name: {user.name}</h1>
              <h1>Age: {user.age}</h1>
              <h1>Username: {user.username}</h1>
            </div>
          )
        })}
     </div>
    </div>
  )
};
export default App;

我通过注释掉“useEffect()”函数并在“function App()”的“useState([])”元素中放入一个对象来测试该功能。该对象确实在页面上正确呈现,但是当我删除该对象并取消注释 useEffect()时,页面再次空白。

我确认我的 API 正在工作,因为我的 API 客户端(Thunder )显示 GET 和 POST 请求正在读取和写入数据库(MongoDB)。

任何建议将不胜感激。如果需要更多信息,请告诉我。谢谢。

1

如果你的问题没有解决,但我建议如下:

  import axios from 'axios'
  ... 
  const [listOfUsers, setListOfUsers] = useState([]);
  const fetchData = async () => {
     const result = await axios.get("http://localhost:3001/getUsersFakeDataGen").then((response) => {
     setListOfUsers(response.data)
     return response.data;
  });
  useEffect(() => {
    fetchData();
  }, [])

注意[]在 useEffect 中,这意味着它只会在页面加载时渲染一次。另外我使用asyncawait等待数据在处理之前被检索 (也许这就是为什么你得到空元素)。你也可以setStateuseEffect之外。

0
import './App.css';
import { useState, useEffect } from 'react';
import Axios from 'axios';
function App() {
const [listOfUsers, setListOfUsers] = useState([]);
  useEffect(() => {
    Axios.get("http://localhost:3001/getUsers").then((response) => {
      setListOfUsers(response.data)
    })
  }, [listOfUsers]); // THIS IS WHERE YOU ADD YOUR useEffect DEPENDENCIES
  return (
    <div className="App">
      <div className="usersDisplay">
       {listOfUsers.map((user) => {
         return (
           <div>
             <h1>Name: {user.name}</h1>
             <h1>Age: {user.age}</h1>
             <h1>Username: {user.username}</h1>
            </div>
         )
        })}
    </div>
    </div>
 )
};
export default App;

OK 看起来所以问题是如果你只提供一个空数组作为你的第二个参数。你的 useEffect 只会运行一次,当你向数组添加有状态值时,useEffect 将在每次状态改变时呈现。如果你省略第二个参数,useeffect 将一遍又一遍地运行。

也在这里-记住你数组开始为空,你需要一个检查它的存在

{listOfUsers?.map.map((item))=>{}}

{listOfUsers.length && listOfUsers.map((item))=>{}}

.

    {listOfUsers.map((user) => {
      return (
        <div>
          <h1>Name: {user.name}</h1>
          <h1>Age: {user.age}</h1>
          <h1>Username: {user.username}</h1>
        </div>
      )
    })}

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(545)
SalesforceLWC尝试从闪电数据行获取recordId 使用docs& Apex方法数据中的示例返回空白对象
上一篇
在从中选取项目后 无法在React Native中关闭手风琴菜单
下一篇

相关推荐

  • type c接口是啥改变你的充电体验

    示例示例Type C接口是一种新型的USB连接器,它可以支持更高的数据传输速度,比传统的USB 0接口更快。与传统的USB接口不同,Type C接口可以在两端都使用,无需额外的翻转,使连接更加方便快捷。下面是一个使用Type C接口的代码示例:…

    2023-01-12 02:06:09
    0 97 35
  • carwings是什么意思智能汽车连接系统的未来

    Carwings是日产汽车公司推出的一款远程智能汽车服务,它可以帮助用户远程监控汽车的状态和行驶信息,并且可以远程控制汽车的功能。…

    2023-01-19 13:55:38
    0 42 52
  • cvt变速箱油分几种:CVT变速箱油的种类及用法

    cvt变速箱油一般分为三种,分别是:传统cvt变速箱油:代码:CVT-1…

    2023-01-27 12:23:25
    0 44 77
  • cv人生履历:从零开始,一步步走向成功——[姓名]的职业生涯

    cv人生履历是一种概括性的文件,用于描述一个人的教育背景、工作经历、技能、专业知识和其他重要信息的文件。它可以帮助雇主评估求职者的资格,并决定是否面试或录用他们。…

    2023-02-01 13:25:09
    0 48 35
  • contextcapture集群:如何使用ContextCapture技术构建高效的3D集群

    ContextCapture集群是一种分布式的技术,它可以让多台服务器共享数据,从而提高应用程序的性能和可靠性。它可以使用多台服务器来收集、存储和处理数据,而不需要单独的服务器来执行这些任务。…

    2023-01-05 08:03:52
    0 41 22
  • cdb文件解锁您的数据库

    CDB文件是一种关联数据库文件格式,用于存储结构化的键/值数据。它是一种高效的文件格式,可以快速检索和更新数据。它可以用作存储用户配置文件,字典,索引,缓存等。…

    2023-02-04 07:44:32
    0 47 49
  • code128条码字体下载:使用 Code128 条码字体创建条码标识

    code128条码字体下载是指下载code128条码字体的过程。Code128条码字体是一种用于生成Code128条形码的字体。它可以将文本转换为条形码,并将条形码打印在各种类型的媒体上。要下载code128条码字体,可以从网上搜索“code128条码字体下载”,然后选择一个可靠的网站下载。一旦下载完成,就可以使用该字体创建code128条形码。…

    2023-01-19 14:44:33
    0 32 71
  • txvlog com糖心改变你的生活,让你的心情更加甜蜜!

    txvlog com糖心是一款以视频分享为主的社交APP,可以让用户上传自己的视频,并与其他用户进行互动。它的主要功能有:用户注册:用户可以通过手机号码、邮箱地址或者社交媒体账号注册,并设置自己的个人信息;…

    2023-01-10 05:08:15
    0 82 83

发表评论

登录 后才能评论

评论列表(49条)