React中Axios二次请求复用首次数据？解决首次搜索undefined问题

问题原因 #

你遇到的问题本质是异步操作的执行顺序问题：

• React的setState是异步更新状态的，调用setPlayerData(response.data)后，playerData不会立刻变成新值，还是初始的空对象{}。
• 两个axios.get请求是并行触发的，第二个请求发起时，第一个请求还没完成，自然拿不到最新的playerData.id，所以首次输出undefined；后续搜索时，playerData已经被上一次的请求更新，所以能拿到值，但这其实是复用了旧数据，逻辑并不正确。

正确实现方式 #

要让第二个请求必须等待第一个请求完成并拿到数据后再执行，有两种常用写法：

方式1：Promise链式调用（then嵌套） #

把第二个axios请求放在第一个请求的then回调内部，确保拿到最新的响应数据后再发起二次请求：

const [summoner, setSummoner] = useState("");
const [playerData, setPlayerData] = useState({});
const [playerRank, setPlayerRank] = useState({});

function searchPlayer(event) {
  // 第一个请求：获取玩家基础数据
  axios.get("API1" + summoner + API_KEY)
    .then(function (response) {
      const newPlayerData = response.data;
      setPlayerData(newPlayerData); // 更新状态
      
      // 第一个请求完成后，立刻发起第二个请求
      return axios.get("API2" + newPlayerData.id + API_KEY);
    })
    .then(function (rankResponse) {
      setPlayerRank(rankResponse.data); // 更新段位数据
    })
    .catch(function (error) {
      console.log(error); // 统一捕获两个请求的错误
    });
}

方式2：async/await语法（更直观） #

用async/await把异步代码写成同步风格，可读性更强：

const [summoner, setSummoner] = useState("");
const [playerData, setPlayerData] = useState({});
const [playerRank, setPlayerRank] = useState({});

async function searchPlayer(event) {
  try {
    // 等待第一个请求完成，拿到玩家数据
    const playerResponse = await axios.get("API1" + summoner + API_KEY);
    const newPlayerData = playerResponse.data;
    setPlayerData(newPlayerData);
    
    // 用拿到的新数据发起第二个请求
    const rankResponse = await axios.get("API2" + newPlayerData.id + API_KEY);
    setPlayerRank(rankResponse.data);
  } catch (error) {
    console.log(error); // 捕获请求错误
  }
}

关键说明 #

• 不要依赖setState后的状态去发起二次请求，直接用请求返回的response.data即可（因为setState异步，状态更新会滞后）。
• 统一错误捕获可以避免重复写catch，让代码更简洁。

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