React中Axios.get().then()内useState未等待响应问题求助

首先纠正一个误解：.then回调只会在Axios请求成功拿到响应后才执行，所以setServLista(response.data)肯定是获取到正确数据后才调用的。你遇到的渲染错误，根源不在setState的执行时机，而是以下几个常见问题：

1. 避免直接操作DOM获取表单值 #

你用document.getElementById获取下拉框的值，这种方式不符合React数据流，可能拿到旧值（比如下拉框值还未更新时），或在组件重渲染后出现意外问题。应该用受控组件，把下拉框的值存在React state中：

// 定义state存储下拉框值和列表数据，给列表设空数组初始值
const [filtroDias, setFiltroDias] = useState('');
const [filtroMoneda, setFiltroMoneda] = useState('');
const [servLista, setServLista] = useState([]);

// 下拉框的onChange事件改为更新对应state
const handleDiasChange = (e) => {
  setFiltroDias(e.target.value);
};

const handleMonedaChange = (e) => {
  setFiltroMoneda(e.target.value);
};

// 修改请求函数，使用state中的值
const filtrarNombres = async () => {
  try {
    const response = await Axios.get('http://localhost:3001/api/getFiltrado', {
      params: { diasRestantes: filtroDias, money: filtroMoneda }
    });
    setServLista(response.data);
    console.log(response.data);
  } catch (error) {
    console.error('请求失败:', error);
    // 可在此处添加错误提示逻辑
  }
};

对应JSX部分：

<select id="filtroDias" value={filtroDias} onChange={handleDiasChange}>
  {/* 下拉选项内容 */}
</select>
<select id="filtroMoneda" value={filtroMoneda} onChange={handleMonedaChange}>
  {/* 下拉选项内容 */}
</select>

2. 初始状态与渲染时的空数据处理 #

如果servLista初始值为undefined，渲染时遍历或访问其属性会直接报错。必须给它设置初始值为空数组：

const [servLista, setServLista] = useState([]);

渲染阶段先判断数据状态再处理，避免无效数据渲染：

{servLista.length > 0 ? (
  <ul>
    {servLista.map(item => (
      <li key={item.id}>{item.nombre}</li> // 假设数据包含id和nombre字段
    ))}
  </ul>
) : (
  <p>暂无数据</p>
)}

3. 关于async/await的正确用法 #

async/await不需要给setState加超时，只要将请求包裹在try/catch中，确保请求成功后再更新state即可，上面的代码已经给出标准示例。

4. 后端响应格式排查 #

尽管你说console.log结果正确，仍可确认后端返回的是否为标准JSON数组，避免存在嵌套结构（比如实际数据在response.data.data中），不过根据你的描述这部分大概率没问题。

内容的提问来源于stack exchange，提问作者prueba envio