React+Axios调用API时rawData状态值为undefined的问题

1. setState是异步操作，无法立即获取最新状态 #

React中useState的更新函数是异步批量执行的，你在调用setRawData后立刻console.log(rawData)，拿到的还是更新前的旧值（初始的undefined），并不是状态没更新。

解决方式：
要么直接打印接口返回的response.data['Time Series (Daily)']验证数据，要么通过单独的useEffect监听rawData的变化来打印最新值。

2. useEffect依赖错误导致逻辑异常 #

当前useEffect的依赖是rawData，初始渲染时rawData为undefined，触发useEffect调用fetchData；当fetchData更新rawData后，依赖变化又会触发useEffect，再次调用fetchData，形成无限循环请求，而且初始打印的始终是旧的undefined值。

解决方式：
将请求数据的useEffect依赖改为空数组[]，确保组件挂载时仅执行一次请求；新增一个专门监听rawData变化的useEffect，用来打印最新状态。

修正后的完整代码 #

const TechnicalAnalysisIndicators = ({ data: initialData, width, ratio }) => {
    const [data, setData] = useState(initialData);
    const [rawData, setRawData] = useState();

    const fetchData = async () => {
        try {
            const response = await axios.get(
                `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=IBM&apikey=Y7UDL0WGHBS74NXI`
            );
            const dailyData = response.data['Time Series (Daily)'];
            setRawData(dailyData);
            // 直接打印接口返回的数据验证
            console.log('接口返回的每日数据：', dailyData);
        } catch (error) {
            console.error('数据请求失败：', error);
        }
    };

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

    // 监听rawData变化，打印最新状态
    useEffect(() => {
        console.log('最新的rawData状态：', rawData);
    }, [rawData]);

    // 其他组件逻辑...
};

额外注意事项 #

• 给异步请求添加try/catch，捕获网络错误或接口返回异常，避免组件崩溃。
• 不要在状态更新后立刻依赖该状态做操作，要么直接使用接口返回的原始数据，要么通过useEffect监听状态变化处理后续逻辑。

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