React中使用Axios获取响应状态后设置State返回undefined的问题

你的核心问题在于getData是异步操作，直接调用它无法立刻拿到请求结果，导致状态更新时status为undefined。具体原因：

• 原getData中，axios.get是异步请求，then里的return response.status并不会同步返回给调用者，而且函数本身没有返回这个Promise，所以调用getData(version)会得到undefined。
• 就算改成async/await，如果不在调用处等待异步操作完成，直接把Promise赋值给status，也无法拿到实际的状态值。

修复步骤 #

1. 改造getData为标准异步函数
   让它返回包含请求状态的Promise，同时处理错误情况：

   const getData = async (version) => {
     try {
       const response = await axios.get(`https://cdn10/${version}/en-US/test.js`);
       return response.status;
     } catch (err) {
       // 自定义错误状态，比如返回响应码或提示文本
       return err.response?.status || '请求失败';
     }
   };
   

2. 修改onClick函数，等待所有异步请求完成后更新状态
   使用Promise.all批量处理所有版本的请求，确保所有结果返回后再更新状态：

   const onClick = async () => {
     // 为每个版本生成异步请求Promise
     const updatedVersionPromises = versions.map(async (item) => {
       const status = await getData(item.version);
       return { ...item, status };
     });
     // 等待所有请求完成，获取最终的版本状态数组
     const updatedVersions = await Promise.all(updatedVersionPromises);
     // 更新状态
     setVersions(updatedVersions);
   };
   

完整修复后的代码 #

import React, { useState } from 'react';
import axios from 'axios';

const Body = () => {
    const defaultVersions = [
        {
            version: '2.96.0',
            status: null,
        }
    ];

    const [versions, setVersions] = useState(defaultVersions);

    const getData = async (version) => {
        try {
            const response = await axios.get(`https://cdn10/${version}/en-US/test.js`);
            return response.status;
        } catch (err) {
            return err.response?.status || '请求失败';
        }
    };

    const onClick = async () => {
        const updatedVersionPromises = versions.map(async (item) => {
            const status = await getData(item.version);
            return { ...item, status };
        });
        const updatedVersions = await Promise.all(updatedVersionPromises);
        setVersions(updatedVersions);
    };

    return (
        <>
            <button onClick={onClick}>Check Versions</button>
            <ul>
                {versions.map(item => {
                    const { version, status } = item;
                    return <li>{`${version}: ${status}`}</li>
                })}
            </ul>
        </>
    );
}

export default Body;

关键说明 #

• Promise.all会等待所有异步请求完成，确保你拿到所有版本的状态后再更新组件状态，避免了异步操作未完成就更新导致的undefined问题。
• 错误处理部分可以根据需求调整，比如返回具体的错误码、错误信息等，让用户能清晰看到请求结果。

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