reactjs – 检查渲染方法

发布时间：2020-12-15 20:18:59 所属栏目：百科来源：网络整理

导读：我正在使用react,redux和react-redux-router.当我运行一个应用程序时,我收到一个错误.我不明白它与我的App.js中的react函数有什么关系.在我看来,问题在于代码中的其他地方. 错误如下： Warning: React.createElement: type is invalid -- expected a string

我正在使用react,redux和react-redux-router.当我运行一个应用程序时,我收到一个错误.我不明白它与我的App.js中的react函数有什么关系.在我看来,问题在于代码中的其他地方.

错误如下：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
 in App
 in Router (created by ConnectedRouter)
 in ConnectedRouter
 in Provider       
 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

我的javascript App文件代码如下所示.

import React from 'react';
 import Header from './common/Header';
 import HomePage from '../components/home/HomePage';
 import Routes from '../routes';            
 const App = () => (
   <div>
   <Header />              
   <Routes />
   </div>
     )

 export default App;

我的Javascript索引文件代码如下所示

import 'babel-polyfill';
 import React from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'react-redux';
 import {BrowserRouter as Router} from 'react-router-dom';
 import configureStore,{history} from './store/configureStore';
 import {loadProducts} from './actions/homeAction';
 import routes from './routes';
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import {ConnectedRouter} from 'react-router-redux';
 import createHistory from 'history/createBrowserHistory'
 import App from './components/App';    

  const store = configureStore();
  store.dispatch(loadProducts("http://localhost:1219/portal/getProducts"));        
 render(
    <Provider store={store}>
    <ConnectedRouter history={history}>
     <App />
     </ConnectedRouter>
     </Provider>,document.getElementById('app')
  );

任何帮助,将不胜感激.如果您想了解更多详情,请告诉我

解决方法

在导入组件时在App.js文件中,请确保在{}中写入

如下

import {Header} from './common/Header';
import {HomePage} from '../components/home/HomePage';

这将解决问题

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!