时间戳

首页 > 解决方案 > React Element Type 无效，为什么会出现此错误，如何解决？

javascript - React Element Type 无效，为什么会出现此错误，如何解决？

问题描述

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

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

检查渲染方法Home。”

在查看 [this] React.createElement: type is invalid -- 期望一个字符串和 [this]检查渲染方法后，我仍然不知道如何解决问题。这是控制台的屏幕截图在此处输入图像描述

代码：Index.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);

应用程序.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;

主页.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;

标签： javascriptreactjs

解决方案

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

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

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

  1. 从组件中删除代码
  2. 减少渲染组件的数量

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

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

推荐阅读