React Element Type 无效，为啥会出现此错误，如何解决？

Posted 2023-02-21

【中文标题】React Element Type 无效，为啥会出现此错误，如何解决？

【英文标题】：React Element Type is Invalid, why am I getting this error and how do I solve it?React Element Type 无效，为什么会出现此错误，如何解决？

【发布时间】：2021-12-15 20:08:51

【问题描述】：

尝试运行我的 react 站点时出现以下错误：

“错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

查看Home的渲染方法。"​​

在查看了 [this] React.createElement: type is invalid -- expected a string 和 [this]Check the render method 之后，我仍然不知道如何解决这个问题。这是控制台的截图

代码： 索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

reportWebVitals(console.log);

App.js

import React from 'react';
import GlobalStyle from './globalStyles';
import  BrowserRouter as Router, Switch, Route  from 'react-router-dom';
import Navbar from './components/Navbar/Navbar';

//Pages
import Home from './pages/Home';
import SignUp from './pages/SignupPage';
import Login from './pages/LoginPage';
import Devs from './pages/Devs';
import Whitepaper from './pages/Whitepaper';
import Token from './pages/Token';
import Footer from './components/Footer/Footer';

function App() 
    return (
        <Router>
            <GlobalStyle />
            <Navbar />
            <Switch>
                <Route path="/" exact component=Home />
                <Route path="/signup" exact component=SignUp />
                <Route path="/devs" exact component=Devs />
                <Route path="/login" exact component=Login />
                <Route path="/whitepaper" exact component=Whitepaper />
                <Route path="/token" exact component=Token />
            </Switch>
            <Footer />
        </Router>
    );


export default App;

Home.js

import React from 'react';
import Content from '../components/Content/Content';
import Features from '../components/Features/Features';
import Hero from '../components/Hero/Hero';
import  heroOne, heroTwo, heroThree  from '../data/HeroData';

// Hero Feature Content Carousel

const Home = () => 
    return (
        <>
            <Hero />
            <Features />
            <Content ...heroOne />
            <Content ...heroTwo />
            <Content ...heroThree />
        </>
    );
;

export default Home;

【问题讨论】：

你能删除大部分代码吗？喜欢来自家庭的<Hero /><Features /><Content ... />，以及不必要的路线，然后再试一次？很难说为什么你家的所有代码都是错误的，否则，请提供复制品

刚刚尝试过，它成功了！ 渲染正确，但是当我介绍其他任何一个时，错误仍然存​​在。有什么原因吗？

home内渲染的组件有一个错误，能否尝试一一重新插入，发现坏组件，然后更新并添加源，以便我们告诉您？

好吧，我想通了！我将组件路由到数据页面，但导致问题的组件中没有数据。我把数据放进去，它起作用了！

我很高兴它有帮助。

【参考方案1】：

在开始使用 ReactJS 编程时，初级开发人员编写错误并破坏渲染是很常见的。

大多数时候，检查他们的组件源导出（命名/默认），检查他们的集成并简化他们的render 方法。

最好的办法是修复渲染，直到找到断点：

从组件中移除代码 减少渲染组件的数量

清理和简化代码越多，获得成功渲染就越容易。

这将帮助您找到损坏的组件并进行修复。完成后，只需使用 git revert 并应用您的修复。