使用 axios 获取数据后反应 useEffect returns 空数组
React useEffect returns empty array after fetching data with axios
我正在尝试从我创建的 api 中获取数据,但它总是 returns 一个空数组。
这是我的代码
const [orders, setOrders] = useState([]);
const getOrders = async () => {
try {
const access_token = localStorage.getItem("access_token");
let result = await axios({
method: "GET",
url: "http://localhost:3000/orders/open",
headers: {
access_token,
},
});
setOrders(result.data);
console.log(result.data);
console.log(orders);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
getOrders();
}, []);
这是我浏览器的控制台结果
如您所见,result.data 成功地在其中 returns 2 个对象,但是在我使用 setOrders(result.data) 将其添加到订单状态后,订单仍然是空的。
我也在Postman上测试了API,完全没有问题。
我一直在用这种方式使用 axios 获取数据,这是我第一次遇到这个问题。
是因为Reactjs的Batching State Update机制
您的状态更新是异步的,因此在 function/event 完成之前不会更新。
在 return()
函数之前检查 console.log(orders)
。
看起来你在状态更新之前console.log,尝试像这样添加 setTimeout 或 console.log 外部函数
const [orders, setOrders] = useState([]);
// you can console.log here after state update
console.log(orders)
const getOrders = async () => {
try {
const access_token = localStorage.getItem("access_token");
let result = await axios({
method: "GET",
url: "http://localhost:3000/orders/open",
headers: {
access_token,
},
});
setOrders(result.data);
console.log(result.data);
setTimeout(() => {
// or wait for 100ms until orders state updated
console.log(orders);
}, 100);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
getOrders();
}, []);
我正在尝试从我创建的 api 中获取数据,但它总是 returns 一个空数组。
这是我的代码
const [orders, setOrders] = useState([]);
const getOrders = async () => {
try {
const access_token = localStorage.getItem("access_token");
let result = await axios({
method: "GET",
url: "http://localhost:3000/orders/open",
headers: {
access_token,
},
});
setOrders(result.data);
console.log(result.data);
console.log(orders);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
getOrders();
}, []);
这是我浏览器的控制台结果
如您所见,result.data 成功地在其中 returns 2 个对象,但是在我使用 setOrders(result.data) 将其添加到订单状态后,订单仍然是空的。
我也在Postman上测试了API,完全没有问题。
我一直在用这种方式使用 axios 获取数据,这是我第一次遇到这个问题。
是因为Reactjs的Batching State Update机制
您的状态更新是异步的,因此在 function/event 完成之前不会更新。
在 return()
函数之前检查 console.log(orders)
。
看起来你在状态更新之前console.log,尝试像这样添加 setTimeout 或 console.log 外部函数
const [orders, setOrders] = useState([]);
// you can console.log here after state update
console.log(orders)
const getOrders = async () => {
try {
const access_token = localStorage.getItem("access_token");
let result = await axios({
method: "GET",
url: "http://localhost:3000/orders/open",
headers: {
access_token,
},
});
setOrders(result.data);
console.log(result.data);
setTimeout(() => {
// or wait for 100ms until orders state updated
console.log(orders);
}, 100);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
getOrders();
}, []);