您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

IT技术 reactjs redux react-redux react-router redux-form
2021-05-01 15:20:07 
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import  createHistory  from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import  ConnectedRouter  from 'react-router-redux';
import { Route, Switch } from 'react-router';
import Home from "./pages/Home";
import Register from "./pages/Register";
import CourseManagerDashboard from "./pages/CourseManagerDashboard";
import CourseDetail from "./pages/CourseDetail";
import App from './app/App';
import LoginForm from './components/LoginForm';

const store = createStore(
    state => state
);
const history = createHistory();

ReactDOM.render((
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route name="home" exact path="/" component={Home} />
                <Route name="register" path="/register" component={Register} />
                <Route name="course-manager-dashboard" path="/course-manager-dashboard" component={CourseManagerDashboard} />
                <Route name="course-detail" path="/course-detail" component={CourseDetail} />
                <Route name="login" path="/login" component={LoginForm} />
                <Route path="/" component={App} />
            </Switch>
        </ConnectedRouter>
    </Provider>
),document.getElementById('app'));

得到以下错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。无法跟踪问题的确切位置。

4个回答

我知道这听起来很傻，但是尝试使用简单的命令检查所有导入的组件console.log：

console.log('Provider', Provider);
console.log('ConnectedRouter', ConnectedRouter);
console.log('Route', Route);
console.log('Switch', Switch);
console.log('Home', Home);
console.log('Register', Register);
console.log('CourseManagerDashboard', CourseManagerDashboard);
console.log('CourseDetail', CourseDetail);
console.log('App', App);
console.log('LoginForm', LoginForm);

把这个放在之前ReactDOM.render，之后const history = createHistory();

其中的行undefined导致了问题。

就我而言，进口是正确的。我只需要删除导入部分中导入的类名周围的大括号

它曾经是

import {DropDownPicker} from 'react-native-dropdown-picker';

我只需要移除周围的括号 DropDownPicker

检查您的导入和您使用的组件。确保其中任何一个都不是完全空白。

删除node_modules和package-lock.json文件。
然后运行npm install

其它你可能感兴趣的问题
上一篇React setState() 返回什么？ 下一篇第一次组装 Anet A6 打印机。只有风扇工作