检查render方法

Question

我使用了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应用程序文件代码如下所示。

 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')
  );

任何帮助都将不胜感激。如果你想了解更多细节，请让我知道

Answer 1

对我来说，似乎我必须删除您的案例中的MemoryRouter或ConnectedRouter。

另外，请注意，我的问题在我的App.test.js文件中，所以它可能不适用于OP的特定用例，但它可能会帮助那些通过谷歌来到这里的人。

有人能解释一下为什么这样做吗？

这是现在正在运行的代码：

<Provider store={store}>
     <App />
</Provider>

这是原始的非工作代码：

<Provider store={store}>
    <ConnectedRouter history={history}>
        <App />
    </ConnectedRouter>
</Provider>

Answer 2

任何其他有此问题的人，请确保您在路由中使用的任何组件都具有导出默认值，否则您将遇到此错误。

Answer 3

对于那些遇到这类问题的人。不要忘记我们在javascript中最好的朋友！

React已经明确指出您在<App />组件中存在问题，因此首先尝试在索引中执行console.log(App)，看看它返回了什么。

然后，通过逐个移除<App />中的组件来深入查看哪个组件导致了故障。