TypeScript中Axios GET请求报错：Cannot read properties of undefined (reading 'get')

报错信息：

App.js:59 Error retrieving data: TypeError: Cannot read properties of undefined (reading 'get')

以下是测试用的App.tsx代码和tsconfig.json配置：

App.tsx代码 #

import * as React from 'react';
const { useEffect, useState } = React;

import axios from "axios";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
        setData(response.data);
      } catch (error) {
        console.error('Erreur lors de la récupération des données:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>Données récupérées</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Aucune donnée récupérée</p>}
    </div>
  );
}

export default App;

tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

解决步骤： #

• 确认Axios已正确安装：打开项目的package.json，检查dependencies中是否有axios。如果没有，执行npm install axios或yarn add axios完成安装。
• 调整导入方式：尝试将import axios from "axios"改为import * as axios from 'axios'，规避ES模块与CommonJS模块的兼容问题。
• 清除缓存并重启服务：如果是Create React App项目，执行npm start --reset-cache；或者直接删除node_modules和package-lock.json，重新执行npm install后启动服务。
• 降级Axios版本：若新版本存在兼容问题，尝试安装稳定版本，比如npm install axios@1.6.0。

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