使用Axios获取数据报错：TypeError: (intermediate value).get is not a function

错误根源是Axios的导入方式错误：你使用了命名导入import { Axios } from 'axios'，但Axios库的核心请求方法（如.get）是挂载在默认导出的实例对象上的，而非命名导出的Axios类。

修复步骤： #

1. 修改Axios的导入语句为默认导入：

import axios from 'axios'

2. 同步更新useEffect中的调用代码，将Axios.get改为axios.get（注意小写，符合社区规范）

修复后的完整代码： #

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

export default function FetchData() {
  const [catFact, setCatFact] = useState('')
  
  // 封装获取猫事实的函数，方便复用
  const getCatFact = () => {
    axios
      .get('https://catfact.ninja/fact')
      .then((res) => {
          setCatFact(res.data.fact);
      })
      .catch((error) => console.log(error));
  }
  
  useEffect(() => {
    getCatFact()
  }, []);

  return (
    <div style={{height:'100vh', display:'grid', placeItems:'center'}}>
      <article style={{padding: '3rem', width:'40rem'}}>
            <div className='grid'>
                <hgroup>
                  <h1>Preview</h1>
                  <h4>Generate facts about cats</h4>
                </hgroup>
                {/* 给按钮添加点击事件，支持手动刷新 */}
                <button onClick={getCatFact}>Cat fact</button>
            </div>
            <div>
              <p>{catFact}</p>
            </div>
      </article>
    </div>
  )
}

额外优化：把请求逻辑封装成独立函数getCatFact，并给按钮绑定点击事件，这样用户可以手动触发新的猫事实获取，解决原代码按钮无功能的问题。

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