我重新发布了一个问题,我问了一个星期前,我离开了我采取的步骤来解决这个问题。我正在一个简单的 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)。
任何建议将不胜感激。如果需要更多信息,请告诉我。谢谢。
如果你的问题没有解决,但我建议如下:
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 中,这意味着它只会在页面加载时渲染一次。另外我使用async
和await
等待数据在处理之前被检索 (也许这就是为什么你得到空元素)。你也可以setState
在useEffect
之外。
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>
)
})}
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(86条)