问题描述
当我尝试使用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)
之后console.log(categories)
不能立即获得输出的原因
以下是useState状态更新的异步行为的一个小示例:
指向工作示例的链接:stackblitz
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>
);
}
以下是上例中发生的情况:
您可以看到数据抓取和状态异步更新的流程。