React中使用Axios获取API数据无法更新userDetails状态问题

云上老周

2026-7-25

问题分析与修复方案

你的代码存在几个关键问题，导致你误以为状态没被更新：

1. 直接在组件函数体中调用`getUser()`，引发重复渲染与异步时机问题

组件每次渲染（包括状态更新后）都会执行函数体里的代码，直接调用getUser()会导致：

状态更新触发组件重新渲染，重新渲染又调用getUser()，陷入无限循环
同步执行的console.log会在getUser的异步请求完成前执行，此时userDetails还是初始的空数组，所以你看到的打印结果是旧值，实际上状态已经被更新了，只是你打印的时机不对

2. `async/await`与`.then`冗余混用

你已经用了async/await处理异步请求，没必要再嵌套.then，这会让代码逻辑变混乱。

3. 未利用`useEffect`处理副作用逻辑

API请求属于React的副作用操作，应该放在useEffect钩子中，搭配空依赖数组确保只在组件挂载时执行一次。

修复后的完整代码

import React, { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
import UserDetails from "./user/userDetails";

function App() {
  const [userDetails, setUserDetails] = useState([]);

  const getUser = async () => {
    try {
      const response = await axios.get("https://randomuser.me/api");
      if (response.data.results) {
        setUserDetails(response.data.results);
      }
    } catch (error) {
      console.error("请求用户数据失败:", error);
    }
  };

  // 仅在组件挂载时执行一次请求
  useEffect(() => {
    getUser();
  }, []);

  // 监听状态变化，查看最新值
  useEffect(() => {
    console.log("当前userDetails状态:", userDetails);
  }, [userDetails]);

  return <UserDetails data={userDetails} />;
}

export default App;