React代码出现"Invalid Element"错误，导入正常该排查什么？

AI 小北

2026-7-8

问题描述

在React应用的App.jsx中遇到以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

App.jsx代码如下：

import React, { useState, useEffect } from "react";
import { Switch, Route } from "react-router-dom";
import UsersList from "./components/UsersList";
import AddUser from "./components/AddUser";
import About from "./components/About";
import axios from "axios";


const App = () => {
  const [users, setUsers] = useState([]);
  const [newUser, setNewUser] = useState({username: '', email: '', password: ''});
  

  const getUsers = () => {
    axios.get("http://localhost/users").then((res) => {
      setUsers(res.data.data.users) }).catch((err) => {
        console.log(err); });
  }

  const addUser = e => {
    e.preventDefault();
    const data = {
      username: newUser.username,
      email: newUser.email
    };
    
    axios.post('http://localhost/users', data).then((res) => {console.log(res); }).catch((err) => {console.log(err); });
    setNewUser({username: '', email: ''});
    
  }

  useEffect(() => {
    getUsers();
  }, [users]);

  return (
    <>
    <section className="section">
    <div className="container">
    <div className="columns">
    <div className="column is-half">
    <br/>
    <Switch>
      <Route exact path="/" render={() => (
        <>
        <h1 className="title is-1">
        All Users
        </h1>
      <hr/><br/>
      <AddUser addUser={addUser} newUser={newUser} setNewUser={setNewUser} />
      <br/><br/>
      <UsersList users={users} />
      </>
      )} />
      <Route exact path="/about" component={About} />
    </Switch>
    </div>
    </div>
    </div>
    </section>
    </>
    );
}

export default App;

补充信息：所有组件（UsersList、AddUser、About）均使用默认导出，package.json配置如下：

{
  "name": "client",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.5.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "6.16.0",
    "react-scripts": "^5.0.1",
    "react-test-renderer": "^18.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --coverage",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

假设导入导出无问题，还需检查哪些内容排查错误？

排查要点

react-router-dom版本不兼容：你当前用的是v6.16.0，但代码里用的是v5的API——v6已经移除了Switch组件，换成了Routes；同时Route的render、component属性也被废弃，必须用element传递组件。现在你导入的Switch是undefined，这直接触发了组件类型无效的错误，这是最核心的问题。
组件内部返回值异常：检查UsersList、AddUser、About组件，确保它们都有明确的return值，不要在渲染逻辑里返回undefined（比如条件判断分支遗漏return，或者直接return空），必须返回null、React元素或Fragment。
useEffect无限循环：你的useEffect依赖了users，但getUsers会更新users，这会导致钩子反复执行，可能引发组件渲染异常。应该把依赖改成空数组，只在组件挂载时调用一次getUsers，或者用ref标记是否首次加载。
接口返回结构不符：确认axios.get返回的res.data.data.users是否存在，如果接口返回的结构和预期不一样，setUsers可能设置了undefined或非数组值，导致UsersList接收异常props而渲染失败。
文件路径大小写/扩展名：检查组件文件的路径是否正确，比如Linux/macOS系统区分大小写，确保导入路径和实际文件名完全一致；另外确认组件文件扩展名是.jsx或.js，避免出现扩展名不匹配的情况。

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