当我尝试使用 axios 从后端 API 获取一些数据,并在由于某种原因获得结果后设置状态时,状态不会更新,当我尝试使用状态时,它只会向我显示一个空数组。但有趣的是当我console.log(res.data)
它会毫无问题地向我显示我的列表数组,所以我猜问题出在setCategories()
状态函数。我究竟做错了什么?
const Home = (props) => {
const [categories, setCategories] = useState([]);
useEffect(() => {
getCats();
}, []);
const getCats = async () => {
const data = await axios.get(`${myUrl}/allItems`, {
withCredentials: true,
});
const cats = await data.data;
console.log(cats); //this one works perfectly
setCategories(cats);
console.log(categories) //this one doesn'nt work which means the setState didn't work
};
return (
<>
<div className="card-div mt-5">
{categories.map((cat) => {
<li>{cat.name}</li>;
})}
</div>
</>
);
};
状态是异步设置的,因此数据不会立即更新。这就是为什么你没有得到输出console.log(categories)
就在之后setCategories(cats);
这是 useState 状态更新的异步行为的一个小示例:
链接到工作示例:堆栈闪电战 https://stackblitz.com/edit/react-pshb4v
import React, { useEffect, useState } from "react";
import "./style.css";
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/users";
export default function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get(url).then(result => {
console.log("1. when data is fetched sucessfully: ", result.data);
setUsers(result.data);
console.log("2. Just after setting state: ", users);
});
}, []);
// secons useEffect for logging out upadated todos useState
useEffect(() => {
console.log("todos upadated: ", users);
}, [users]);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
{users.map(user => (
<p>{user.name}</p>
))}
</div>
);
}
以下是上面示例中发生的情况:
您可以看到数据获取和状态异步更新的流程。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)