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。 元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件。
2。 React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件。
我已经提到很多答案,我无法识别错误。
答案 0 :(得分:14)
问题在于import语句。在导入某些组件(例如createHistory
。
如果组件使用默认导出,例如:
export default X
然后你可以简单地导入它:
import X from './X';
但是如果您使用的命名导出如下:
export const X=1;
然后你需要用花括号导入它,如:
import {X} from './X';
所以看看你的进口。这将解决您的问题。
答案 1 :(得分:4)
我在我的反应应用程序中遇到了同样的问题。如上所述,这绝对是您的进口声明。
我改变了
import x from '/x.js'
至
nameKey
完成工作
答案 2 :(得分:1)
当其中一个嵌套组件尝试呈现不存在的组件时,我也会遇到此错误。具体来说,我试图使用
<Button ... />
React中的反应本机组件,我本应该使用
<button ... />
答案 3 :(得分:1)
对我来说,当我忘记在导出文件中使用react-redux的connect
时,我就遇到了这个问题。
所以
更改:
export default(mapStateToProps, mapDispatchToProps)(ContentTile);
收件人:
export default connect(mapStateToProps, mapDispatchToProps)(ContentTile);
解决了问题。真是愚蠢的错误
答案 4 :(得分:0)
它也可能是从入口点所在的地方引起的。
在我的情况下,App.js正在调用index.js(开发人员控制台在其中标识错误,而我的RenderDom调用在其中)。
但是,App.js引用了一个组件,而在该组件中却出现了错误(对另一个不存在的组件的引用)。
答案 5 :(得分:0)
如上所述,此问题与进口有关。就我而言,这是一个CSSTransitionGroup导入。在npm更新之后,软件包“ react-transition-group”不再包含CSSTransitionGroup,而是包含不同的导出,例如CSSTransition和TransitionGroup。所以我只是替换行:
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
使用
import TransitionGroup from 'react-transition-group/TransitionGroup';
答案 6 :(得分:0)
在我的情况下,我解决了更改组件的问题:它们是用函数声明编写的,而我是通过经典的Class声明(class App extends React.Component
而不是function App()
来更改它们的)
答案 7 :(得分:0)
在尝试向我的应用程序中添加路由时,我也遇到了类似的问题。 然后,我意识到我正在从“反应路由器”中导入{BrowserRouter,Route};而不是如下所示从react-router-dom正确导入 从“ react-router-dom”导入{BrowserRouter,Route}。 感谢在线社区
答案 8 :(得分:0)
确保您导出组件。如果您已经在导出,那么您可能错过了默认设置。
export default function App(){
...
}
答案 9 :(得分:0)
这是一种特殊情况,但是当我尝试将两个图表放入一个 ResponsiveContainer 时,Recharts 为我抛出了这个错误。那是not supported。
答案 10 :(得分:-2)
对我来说,我试图在app.js中路由某些有问题的组件,所以由于app.js中的不正确导入,index.js将不会呈现/。
因此请确保app.js中的组件正常工作