React中useState调用Axios后首次打印undefined的解决方法

AI 小北

2026-8-24

React状态更新异步问题解决方法

问题原因

React中useState的状态更新是异步操作，调用setArticle后，article变量不会立刻更新为新值。首次点击时，console.log(article)执行时状态还没完成更新，所以输出初始的undefined；第二次点击时，上一次的状态更新已经完成，因此能拿到正确值。

解决方案

方案一：在请求回调内直接处理数据

不需要依赖状态更新，在then回调里直接使用接口返回的数据，这样能立刻拿到最新值：

import { useState } from "react";
import axios from "axios";

const [apiData, setApiData] = useState();
const [article, setArticle] = useState();

const getArticleFromApi = () => {
  axios
    .get(`http://localhost:8080/api/articles/${apiData.brand_id}/${apiData.article_number}`)
    .catch((err) => console.log(err))
    .then((resp) => {
      const newArticle = resp.data.data;
      setArticle(newArticle);
      // 直接在这里处理新数据，无需等待状态更新
      console.log(newArticle);
      // 其他需要使用article的业务逻辑也放在此处
    });
};

方案二：用useEffect监听状态变化

如果需要在article状态更新后执行逻辑，比如渲染后的数据处理，可以使用useEffect监听article的变化：

import { useState, useEffect } from "react";
import axios from "axios";

const [apiData, setApiData] = useState();
const [article, setArticle] = useState();

// 监听article状态变化，更新完成后执行逻辑
useEffect(() => {
  if (article) { // 过滤初始的undefined状态
    console.log(article);
    // 这里写需要依赖最新article的逻辑
  }
}, [article]); // 依赖项数组，只有article变化时才触发

const getArticleFromApi = () => {
  axios
    .get(`http://localhost:8080/api/articles/${apiData.brand_id}/${apiData.article_number}`)
    .catch((err) => console.log(err))
    .then((resp) => {
      setArticle(resp.data.data);
    });
};