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

Posted 2023-03-17

【中文标题】使用 axios 获取数据后 React useEffect 返回空数组

【英文标题】：React useEffect returns empty array after fetching data with axios

【发布时间】：2021-10-28 13:11:48

【问题描述】：

我正在尝试从我创建的 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 获取数据，这是我第一次遇到这个问题。

【参考方案1】：

因为Reactjs的Batching State Update机制

您的状态更新是异步的，因此在函数/事件完成之前不会更新。

在 return() 函数之前检查 console.log(orders)。

【讨论】：

啊，我明白了.. 感谢您的文章。我之前不知道

【参考方案2】：

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