使用Axios异步请求首次返回undefined，二次提交才正常的问题

问题根源 #

你的问题核心是React状态更新是异步的。调用setInfo(res)后立刻执行console.log(info)时，React还没完成状态更新，所以打印的是更新前的旧值（初始状态的undefined）。第二次提交时，info已经存储了第一次请求的结果，所以能打印出内容，但这其实是上一次的状态，并非当前请求的最新响应。

修复方案 #

1. 直接查看请求响应
   如果只是需要确认当前请求的返回数据，无需等待状态更新，直接打印请求得到的res即可：

let showcode = async (data) => {
  try {
    setLoading(true);
    const url = `https://fortnite-api.com/v2/creatorcode?name=${data.code}`;
    let res = await axios.get(url);
    setInfo(res);
    console.log(res); // 直接打印当前请求的响应结果
    setLoading(false);
  } catch (err) {
    setLoading(false);
    console.log("error aca "+ err); // 注意：这里要使用console.log，原代码的console()是错误写法
  }
};

2. 基于更新后的状态执行逻辑
   如果后续业务逻辑必须依赖更新后的info状态，要通过useEffect钩子监听info的变化，在状态更新完成后再处理：

import { useEffect } from 'react';

// 组件内部添加useEffect监听
useEffect(() => {
  if (info) {
    console.log(info); // 这里的info是更新后的最新状态
    // 在这里编写需要用到最新info的业务逻辑
  }
}, [info]); // 仅当info变化时触发

let showcode = async (data) => {
  try {
    setLoading(true);
    const url = `https://fortnite-api.com/v2/creatorcode?name=${data.code}`;
    let res = await axios.get(url);
    setInfo(res);
    setLoading(false);
  } catch (err) {
    setLoading(false);
    console.log("error aca "+ err);
  }
};

内容的提问来源于stack exchange，提问作者Alexandro Pineda