使用React Hook useEffect+Axios时触发TypeError: Object(...) is not a function错误求助

下面列出几个最可能导致该错误的原因及对应的解决办法：

1. React版本过低不支持Hooks #

useEffect是React 16.8.0及以上版本才引入的Hook API，如果你的项目React版本低于这个阈值，调用useEffect就会抛出该错误。

• 检查package.json中react和react-dom的版本号，确认是否≥16.8.0
• 执行升级命令：

npm install react@latest react-dom@latest
# 或使用yarn
yarn add react@latest react-dom@latest

2. Axios依赖异常或导入错误 #

虽然你的代码中导入语句看起来正确，但Axios安装不完整、版本冲突或导入方式错误都可能引发问题：

• 先卸载并重新安装Axios，确保依赖完整：

npm uninstall axios && npm install axios

• 确认导入语句为默认导入：import axios from 'axios'，不要写成解构导入import { axios } from 'axios'（Axios默认导出的是实例对象，不是命名导出）

3. 项目存在多版本React依赖 #

如果项目中同时存在多个版本的React，Hook会因为无法绑定正确的React内部上下文而报错：

• 运行npm ls react查看依赖树，确认是否有重复的React包
• 清理依赖后重新安装：

rm -rf node_modules package-lock.json
npm install

验证可用代码 #

确保环境修复后，你可以给请求加上错误捕获，提升代码健壮性：

import React,{useEffect, useState} from 'react';
import Post from '../../components/Post/Post';
import FullPost from '../../components/FullPost/FullPost';
import NewPost from '../../components/NewPost/NewPost';
import axios from 'axios';
import './Blog.module.css';

const Blog = (props) => {
  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
        console.log('请求成功:', response.data);
      } catch (err) {
        console.error('请求失败:', err.message);
      }
    };
    fetchPosts();
  }, []);

  return (
    <div>
      <section className="Posts">
        <Post/>
        <Post/>
        <Post/>
      </section>
      <section>
        <FullPost/>
      </section>
      <section>
        <NewPost/>
      </section>
    </div>
  );
}

export default Blog;

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