使用Axios获取的数据无法填充React useState状态怎么办？

核心问题1：setState更新函数误用异步逻辑 #

你在setUserDetails中传入了async函数，这是错误的。React的状态更新函数不能是异步的，它会把返回的Promise对象直接作为状态值，而非你期望合并后的用户对象。

正确写法是去掉async/await（对象合并是同步操作，完全不需要异步）：

setUserDetails(prevState => ({ ...prevState, ...res.data.fetchedUser }));

核心问题2：立刻打印无法获取更新后的状态 #

setUserDetails是异步操作，调用后不会立刻更新状态。你在调用后马上执行console.log(userDetails)，打印的是更新前的旧值，这会让你误以为状态没更新。

要查看更新后的状态，可通过两种方式：

• 用useEffect监听userDetails变化：

  useEffect(() => {
    console.log("更新后的userDetails:", userDetails);
  }, [userDetails]);
  

• 在组件JSX中直接渲染userDetails，从页面查看结果。

其他潜在问题 #

• useEffect依赖缺失：你的effect依赖数组为空，但内部用到了user.token。如果user对象更新，effect不会重新执行，可能导致请求使用旧token。需把user加入依赖数组：

  useEffect(() => {
    // 请求代码
  }, [user]);
  

• 错误的状态更新方式：你提到尝试setUserDetails = res.data.fetchedUser，这完全错误。setUserDetails是React提供的状态更新函数，必须通过调用它更新状态，正确写法是setUserDetails(res.data.fetchedUser)。

修正后的完整代码示例 #

let UserDetailsUpdatedCard = {};

export default function ProfileDetails() {
  
  const { user } = useContext(UserContext);
  const [userDetails, setUserDetails] = useState({});

  useEffect(() => {
    axios
      .get("http://localhost:42690/api/users/user-details", {
        headers: { Authorization: `Bearer ${user.token}` },
      })
      .then((res) => {
        console.log("接口返回的用户数据:", res.data.fetchedUser);
        setUserDetails(prevState => ({ ...prevState, ...res.data.fetchedUser }));
      })
      .catch((err) => {
        toast.error("Failure to Load Profile");
      });
  }, [user]);

  useEffect(() => {
    console.log("更新后的userDetails:", userDetails);
  }, [userDetails]);

  return (
    <div>
      {/* 渲染用户信息示例 */}
      {userDetails.name && <p>用户名：{userDetails.name}</p>}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Vedanta Mohapatra