ReactJS中如何将Axios获取的JSON字符串转为可用Map？

问题根源 #

你从接口拿到的response.data是JSON格式的字符串，而非自动解析好的JS对象。直接对字符串调用Object.entries()会把字符串拆成「索引为键、单个字符为值」的键值对，这就是你看到大量整数键异常结果的原因。

解决步骤 #

1. 解析JSON字符串为JS对象
   在获取数据时，对response.data执行JSON.parse()转换，确保拿到可操作的JS对象。
2. 将JS对象转为Map
   用Object.entries()把JS对象的键值对转成二维数组，再传入new Map()就能得到支持get()、keys()方法的标准Map实例。

修改后的完整代码 #

const fetchData = () => {
    const url = "http://127.0.0.1:8081/pdata";
    return axios.get(url)
        .then((response) => {
            // 仅当返回值是字符串时解析，兼容接口可能自动解析的情况
            return typeof response.data === 'string' ? JSON.parse(response.data) : response.data;
        });
}

export default function Home() {
    // 初始值设为空对象，匹配数据的键值对结构
    const [data, setData] = React.useState({});

    useEffect(() => {
        fetchData()
            .then((apiData) => {
                setData(apiData);
            })
            .catch(err => console.log(err));
    }, []);

    // 避免初始渲染时data为空导致的转换错误
    const map = Object.keys(data).length ? new Map(Object.entries(data)) : new Map();
    
    console.log(map.get("Model Used"));
    console.log([...map.keys()]);

    return <div>数据转换完成</div>;
}

额外说明 #

• 之前用JSON.parse()没成功，大概率是调用时机错误（比如对已解析的对象重复解析，或解析后未正确赋值），上面的代码先判断类型再解析，更严谨。
• 把useState初始值从[]改为{}，因为你的数据是键值对结构而非数组，避免后续逻辑判断出错。

内容的提问来源于stack exchange，提问作者Shavk with a Hoon