警告:React.createElement:类型无效——需要一个字符串(对于内置组件) [英] Warning: React.createElement: type is invalid -- expected a string (for built-in components)

问题描述

我需要你的帮助.警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件.检查 App 的渲染方法.在应用程序中(由 Connect(App) 创建)在连接(应用程序)在提供者中

App.js

 import React from 'react';从'react-router-dom'导入{路由器，路由}；从'react-redux'导入{连接}；从'./_helpers/index'导入{历史}；从'./_actions/index'导入{alertActions}；从 './_components/PrivateRoute.js' 导入 PrivateRoute；从'./map/Map.js'导入地图；从'./LoginPage/LoginPage.js'导入登录页面；从'./RegisterPage/RegisterPage.js'导入RegisterPage；类 App 扩展了 React.Component {构造函数(道具){超级(道具)；const { dispatch } = this.props;history.listen((位置，动作)=> {//清除位置变化警报调度(alertActions.clear())；});}使成为() {const { 警报 } = this.props;返回 (<div className="jumbotron"><div className="容器"><div className="col-sm-8 col-sm-offset-2">{alert.message &&<div className={`alert ${alert.type}`}>{alert.message} </div>}<路由器历史={历史}><div><PrivateRoute 精确路径="/" component={Map}/><Route path="/login" component={LoginPage}/><Route path="/register" component={RegisterPage}/>

</路由器>

);}}函数 mapStateToProps(state) {const { 警报 } = 状态；返回 {警报};}导出默认连接(mapStateToProps)(应用程序)；

index.js

 import React from 'react';从'react-dom'导入{渲染}；从'react-redux'导入{提供者}；从'./_helpers'导入{商店}；从'./App.js'导入应用程序；导入'./index.css';//postCSS 导入 CSS 模块从 './_helpers' 导入 { configureFakeBackend };configureFakeBackend();使成为(<提供者商店={商店}><应用程序/></提供者>,document.getElementById('root') );

解决方案

这是我们关注的内容，可能会对您有所帮助.

render(, document.getElementByid('root'));

ConfigureRoute 在哪里

const ConfigureRoute = props =>(<供应商商店={props.store}><路由器历史={历史}><应用程序><路线精确的路径=/登录"渲染={routeProps =><LoginContainer {...routeProps} {...props}/>}/></App></Router></Provider>const App = 道具 =>props.children;

I need your help please. Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of App. in App (created by Connect(App)) in Connect(App) in Provider

App.js

    import React from 'react';
    import { Router, Route } from 'react-router-dom';
    import { connect } from 'react-redux';
    import { history } from './_helpers/index';
    import { alertActions } from './_actions/index';
    import PrivateRoute from './_components/PrivateRoute.js';
    import Map from './map/Map.js';
    import LoginPage from './LoginPage/LoginPage.js';
    import RegisterPage from './RegisterPage/RegisterPage.js';
    class App extends React.Component {
    constructor(props) {
    super(props);

    const { dispatch } = this.props;
    history.listen((location, action) => {
        // clear alert on location change
        dispatch(alertActions.clear());
    });
  }
render() {
    const { alert } = this.props;
    return (
        <div className="jumbotron">
            <div className="container">
                <div className="col-sm-8 col-sm-offset-2">
                    {alert.message &&
                    <div className={`alert ${alert.type}`}>{alert.message}   </div>
                    }
                    <Router history={history}>
                        <div>
                            <PrivateRoute exact path="/" component={Map} />
                            <Route path="/login" component={LoginPage} />
                            <Route path="/register" component={RegisterPage} />
                        </div>
                    </Router>
                </div>
            </div>
        </div>
    );
    }
    }

    function mapStateToProps(state) {
      const { alert } = state;
     return {
    alert
      };
      }

      export default connect(mapStateToProps)(App);

index.js

  import React from 'react';
  import { render} from 'react-dom';
  import { Provider } from 'react-redux';
  import { store } from './_helpers';
  import App from './App.js';
  import './index.css'; // postCSS import of CSS module
  import { configureFakeBackend } from './_helpers';
  configureFakeBackend();
  render(
      <Provider store={store}>
       <App />
      </Provider>,
document.getElementById('root') );

解决方案

This is what we follow it might help you.

render(<ConfigureRoute store={store} />, document.getElementByid('root'));

where ConfigureRoute is

const ConfigureRoute = props => (<Provider store={props.store}>
    <Router history={history}>
  <App>
    <Route
      exact
      path="/login"
      render={routeProps => <LoginContainer {...routeProps} {...props} />}
    /></App></Router></Provider>

const App = props => props.children;

这篇关于警告:React.createElement:类型无效——需要一个字符串(对于内置组件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！