我试图从我创建的 api 中获取数据,但它总是返回一个空数组。
这是我的代码
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 成功返回了其中的 2 个对象,但是当我使用 setOrders(result.data) 将其添加到订单状态后,订单仍然为空。
我一直在用axios这种方式获取数据,这是我第一次遇到这个问题。
您的状态更新是异步的,因此在功能/事件完成之前不会更新。
在执行
console.log(orders)
功能之前检查 return()
。
看起来你在状态更新之前做了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();
}, []);
嗯..我真的不明白为什么我们在控制台中看不到订单...在这种情况下批处理更新有何影响?