Question

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。您可能忘记从其定义的文件中导出组件。

我已经提到很多答案，我无法识别错误。

Answer 1

问题在于import语句。在导入某些组件（例如createHistory。

时，您没有使用大括号

如果组件使用默认导出，例如：

export default X

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

import X from './X';

但是如果您使用的命名导出如下：

export const X=1;

然后你需要用花括号导入它，如：

import {X} from './X';

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

Answer 2

我在我的反应应用程序中遇到了同样的问题。如上所述，这绝对是您的进口声明。我改变了 import x from '/x.js'
至
nameKey
完成工作

Answer 3

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

<Button ... />

React中的反应本机组件，我本应该使用

<button ... />

Answer 4

对我来说，当我忘记在导出文件中使用react-redux的connect时，我就遇到了这个问题。

所以

更改：

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

收件人：

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

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

Answer 5

它也可能是从入口点所在的地方引起的。

在我的情况下，App.js正在调用index.js（开发人员控制台在其中标识错误，而我的RenderDom调用在其中）。

但是，App.js引用了一个组件，而在该组件中却出现了错误（对另一个不存在的组件的引用）。

Answer 6

如上所述，此问题与进口有关。就我而言，这是一个CSSTransitionGroup导入。在npm更新之后，软件包“ react-transition-group”不再包含CSSTransitionGroup，而是包含不同的导出，例如CSSTransition和TransitionGroup。所以我只是替换行：

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

使用

import TransitionGroup from 'react-transition-group/TransitionGroup';

Answer 7

在我的情况下，我解决了更改组件的问题：它们是用函数声明编写的，而我是通过经典的Class声明（class App extends React.Component而不是function App()来更改它们的）

Answer 8

在尝试向我的应用程序中添加路由时，我也遇到了类似的问题。然后，我意识到我正在从“反应路由器”中导入{BrowserRouter，Route}；而不是如下所示从react-router-dom正确导入从“ react-router-dom”导入{BrowserRouter，Route}。感谢在线社区

Answer 9

确保您导出组件。如果您已经在导出，那么您可能错过了默认设置。

export default function App(){
 ...
}

Answer 10

这是一种特殊情况，但是当我尝试将两个图表放入一个 ResponsiveContainer 时，Recharts 为我抛出了这个错误。那是not supported。

Answer 11

对我来说，我试图在app.js中路由某些有问题的组件，所以由于app.js中的不正确导入，index.js将不会呈现/。

因此请确保app.js中的组件正常工作

元素类型无效：期望字符串（对于内置组件）或类/函数

11 个答案: