元素类型无效:应为字符串(对于内置组件)或类/函数

IT技术 reactjs redux
2021-03-28 09:50:05
import React from 'react';
import ReactDOM from 'react-dom';
import Map from './components/map/container/map';
import App from './App';
import './index.css';
import shell from './shared/utility/shell';
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware, ConnectedRouter } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
import registerServiceWorker from './registerServiceWorker';
import { Routes } from './config';

const history = createHistory();
const target = document.querySelector('#root')
const initialState = {};
const enhancers = [];
const middleware = [
thunk,
routerMiddleware(history)
 ];

if (process.env.NODE_ENV === 'development') {
const devToolsExtension = window.devToolsExtension;

if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension());
 }
}
const composedEnhancers = compose(
applyMiddleware(...middleware),
  ...enhancers
);
const store = createStore(
 rootReducer,
 initialState,
 composedEnhancers
);
render(
  <Provider store={store}>
   <ConnectedRouter history={history}>
    <div>
     <Routes />
    </div>
   </ConnectedRouter>
  </Provider>,
  target
   )
 registerServiceWorker();
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

我试图在 redux 的帮助下调用 API 并将其数据显示在表中。我收到此错误。上面是我的index.js文件。


1. 元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件。


2. React.createElement: type is invalid -- 需要字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。您可能忘记从定义组件的文件中导出组件。

我参考了许多我无法识别错误的答案。

6个回答

问题出在导入语句中。您在导入某些组件时没有使用花括号,例如createHistory.

如果组件使用默认导出,例如:

export default X

然后你可以简单地导入它:

import X from './X';

但是,如果您使用的是命名导出,例如:

export const X=1;

然后你需要用花括号导入它,如:

import {X} from './X';

所以看看你的进口。这将解决您的问题。

您可以在声明类时直接编写导出:export default class Map{ render{ return();}} 并像 import Map from ./class 一样导入它
2021-05-24 09:50:05
更正 createHistory 后,我收到此错误。_WEBPACK_IMPORTED_MODULE_10_history_createBrowserHistory__.createHistory 不是函数
2021-05-27 09:50:05
它浪费了我的 20-30 分钟,我无法弄清楚我做错了什么。现在我知道那是什么了,谢谢你的回答:)
2021-05-28 09:50:05
如果在另一个文件夹中我提到过这样...从 './container/map' 导入 _map; 导出 { _map 作为地图 }; 我需要用花括号括起 Map 吗?
2021-05-29 09:50:05
是因为这个吗?
2021-06-19 09:50:05

我在 React 应用程序中遇到了同样的问题。如上所述,这绝对是您的导入语句。我变了:

import {x} from '/x.js'import x from '/x.js'

这就完成了工作

确实是这个问题。也谢谢你的回答
2021-06-06 09:50:05

当其中一个嵌套组件尝试呈现不存在的组件时,我也遇到了此错误。具体来说,我试图使用

<Button ... /> 

React 中的 react-native 组件,我应该在其中使用

<button ... />

它也可能是由入口点所在的位置引起的。

就我而言,App.js 正在调用 index.js(开发者控制台识别错误的位置,以及我的 RenderDom 调用位置)。

但是,App.js 正在引用一个组件,并且正是在该组件中出现了错误(对另一个不存在的组件的引用)。

对我来说,当我忘记connect在导出中使用 react-redux 时,我遇到了这个问题

所以,

改变:

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

到:

export default connect(mapStateToProps, mapDispatchToProps)(ContentTile);

解决了这个问题。真是愚蠢的错误