React useEffect 使用 axios 获取数据后返回空数组

问题描述 投票:0回答:3

我试图从我创建的 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) 将其添加到订单状态后,订单仍然为空。

我也在Postman上测试过API,完全没有问题。

我一直在用axios这种方式获取数据,这是我第一次遇到这个问题。

reactjs axios react-hooks use-effect react-fullstack
3个回答
2
投票

是因为Reactjs的Batching State Update机制

您的状态更新是异步的,因此在功能/事件完成之前不会更新。

在执行

console.log(orders)
功能之前检查
return()


1
投票

看起来你在状态更新之前做了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();
  }, []);

0
投票

嗯..我真的不明白为什么我们在控制台中看不到订单...在这种情况下批处理更新有何影响?

© www.soinside.com 2019 - 2024. All rights reserved.