React中Axios发起GET请求返回undefined的原因与修复方案

代码拿不到返回值是两个核心问题导致的：

• GetJudete 函数本身没有返回值：你在函数内部调用了axios.get()，但没有把这个Promise对象return出去，函数默认执行完成后会返回undefined；就算你在then回调里return了response.data，这个返回值也只是Promise链内部的回调返回值，不会成为GetJudete的对外返回结果。
• 异步执行时机和变量存储方式错误：
  1. 组件首次渲染是同步执行的，console.log(judete)会在渲染阶段立刻执行，此时useEffect的回调还没运行，异步请求更是还没返回结果，自然拿不到值。
  2. 你用普通let变量存储请求结果，就算异步请求返回了，给普通变量赋值不会触发组件重渲染，而且组件每次重渲染都会把这个普通变量重置回初始的undefined，永远无法持久化存储请求结果。

1. 修改GetJudete方法，返回axios生成的Promise对象，保证调用方可以拿到异步结果
2. 用React的useState定义judete状态，替代普通let变量，异步数据更新后可以触发组件重渲染，持久化存储结果
3. 在useEffect中调用异步请求，等Promise resolve后把结果存入state，可以增加卸载标记避免组件卸载后更新state导致的内存泄漏警告

修复后的完整代码如下：

import { useEffect, useState } from 'react';

import 'ag-grid-community/dist/styles/ag-grid.min.css';
import 'ag-grid-community/dist/styles/ag-theme-material.min.css';
import Grid from '../Common/Grid';
import axios from 'axios';

// 返回axios的Promise实例
function GetJudete() {
  return axios.get("http://localhost:5266/api/judete")
    .then((response) => response.data)
    .catch(err => {
      console.log("Eroare la aducerea datelor.");
      // 错误场景返回空数组，避免后续取值报错
      return [];
    })
};

function Localitati()
{
  // 用state存储judete数据，替代普通变量
  const [judete, setJudete] = useState([]);
  useEffect(() => {
    // 标记组件是否卸载，避免内存泄漏
    let isUnmounted = false;
    async function fetchData() {
      const data = await GetJudete();
      if (!isUnmounted) {
        setJudete(data);
        console.log('接口返回的judete数据：', data);
      }
    }
    fetchData();
    return () => {
      isUnmounted = true;
    }
  }, []);
  // 首次渲染时judete是初始空数组，请求完成重渲染后会拿到最新值
  console.log('渲染阶段judete值：', judete);
  
  const [columnDefs] = useState([
    { field: 'nume', filter: 'agTextColumnFilter', editable: true },
    { field: 'judetID', filter: 'agTextColumnFilter', editable: true },
  ])
  return (
    <Grid 
    baseLink='http://localhost:5266/api/localitati'
    columnDefs={columnDefs}
    judete={judete}
    />
  );
}

export default Localitati;

修复后首次渲染控制台会打印初始的空数组，等异步请求返回后会触发第二次重渲染，此时就能拿到接口返回的实际数据。

内容的提问来源于stack exchange，提问作者Octavian Niculescu