为什么我的反应使用效果挂钩不工作 (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>
      )
    })}

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

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

相关推荐

发表评论

登录 后才能评论

评论列表(39条)