React中使用Axios发起GET请求报错：default.get is not a function

嘿，我一眼就揪出问题根源了——你在api.js里错误地用了axios.get()来创建Axios实例，这才导致调用api.get()时出现TypeError。

错误原因拆解 #

axios.get()是用来直接发起GET请求的方法，它返回的是一个Promise对象，而不是一个配置好的Axios实例。你把这个Promise赋值给了api变量，自然就找不到.get()方法了，这就是报错的核心原因。

修正步骤 #

1. 修复api.js代码

把axios.get()替换成axios.create()，这个方法才是用来创建带预设配置的Axios实例的：

import axios from 'axios'; 

// 用axios.create创建配置好的实例
const api = axios.create({ 
  baseURL: 'https://api.covid19api.com', 
}); 

export default api;

2. 关于console.log(apiData)为空的说明

你看到初始的console.log(apiData)输出空数组，是因为组件第一次渲染时，异步请求还没完成，apiData还是你设置的初始值{ elements: [] }。如果想查看请求完成后的状态，可以把console.log放到依赖apiData的useEffect里，或者直接在组件渲染时打印：

useEffect(() => {
  console.log('Updated apiData:', apiData);
}, [apiData]);

可选：给Chart组件加健壮性优化 #

为了让组件更友好，建议加上加载状态和错误处理：

import React, { useEffect, useState } from 'react'; 
import api from '../../assets/API'; 

export default function Chart() { 
  const [apiData, setDataApi] = useState({ elements: [] });
  const [isLoading, setIsLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => { 
    const fetchData = async () => { 
      try {
        const result = await api.get('/countries'); 
        setDataApi(result.data); 
      } catch (err) {
        setFetchError(`请求失败：${err.message}`);
      } finally {
        setIsLoading(false);
      }
    }; 
    fetchData(); 
  }, []); 

  if (isLoading) return <h1>数据加载中...</h1>;
  if (fetchError) return <h1 style={{color: 'red'}}>{fetchError}</h1>;

  return( 
    <div>
      <h1>数据加载完成！</h1>
      <pre>{JSON.stringify(apiData, null, 2)}</pre>
    </div>
  ) 
}

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