React.createElement:类型无效-预期为字符串

reactjs React.js

LEY古一阿飞

2020-03-13

试图使react-router(v4.0.0)和react-hot-loader(3.0.0-beta.6)正常播放,但是在浏览器控制台中出现以下错误:

警告:React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件。

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

route.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes = () => (

    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>

);

export default routes;

第1395篇《React.createElement:类型无效-预期为字符串》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
西里Mandy 2020.03.13

我收到此错误,但我的情况没有一个答案,它可能有助于谷歌搜索:

我定义了一个Proptype错误:

ids: PropTypes.array(PropTypes.string)

它应该是:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode和编译错误没有给我正确的提示。

L理查德 2020.03.13

这是一些必须调试的错误。正如许多次所说的,不正确的导入/导出会导致此错误,但是令人惊讶的react-router-dom authentication setup,我下面的一个小错误中得到此错误的

错误设置:

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

正确的设置:

const PrivateRoute = ({ component: Component, token, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

唯一的区别是我是解构tokenPrivateRoute component令牌从得到的方式localstorage是这样const token = localStorage.getItem("authUser");,所以如果它不存在,我知道该用户未通过身份验证。这也会导致该错误。

神奇启人 2020.03.13

循环依赖也是原因之一。[一般来说]

猿神奇 2020.03.13

就我而言,尝试使用ContextApi时发生了错误。我误用了:

const MyContext = () => createContext()

但这应该定义为:

const MyContext = createContext()

我将其张贴在这里,以便将来因此类愚蠢错误而卡住的访客将有助于避免数小时的头痛,因为这不是由错误的进出口引起的。

Tony飞云 2020.03.13

就我而言,我只需要从升级到react-router-redux即可react-router-redux@next我假设它一定是某种兼容性问题。

逆天伽罗宝儿 2020.03.13

我错过了一个React Fragment


function Bar({ children }) {

  return (
    <div>
     {children}
    </div>
  );
}

function Foo() {
  return (
    <Bar>
      <Baz/>
      <Qux/>
    </Bar>
  );
}

上面的代码抛出上面的错误。但这解决了:

<Bar>
  <>
    <Baz/>
    <Qux/>
  </>
</Bar>
理查德村村小宇宙 2020.03.13

简而言之,以下情况正在发生:

render() {
    return (
        <MyComponent /> // MyComponent is undefined.
    );
}

它可能不一定与某些不正确的导入或导出有关:

render() {
    // MyComponent may be undefined here, for example.
    const MyComponent = this.wizards[this.currentStep];

    return (
        <MyComponent />
    );
}
村村AL 2020.03.13

就我而言,我忘记了导入和导出index.js文件中的render调用的(新)元素。

小胖泡芙 2020.03.13

就我而言,创建组件和渲染的顺序很重要。我在创建组件之前就对其进行了渲染。最好的方法是先创建子组件,再创建父组件,然后渲染父组件。更改订单对我来说解决了这个问题。

村村小小十三 2020.03.13

我认为解决此错误时最重要的事情是,当您尝试实例化一个不存在的组件时,它就会显现出来。该组件不必导入。就我而言,我将组件作为属性传递。在进行一些重构后,我忘记更新其中一个调用以正确传递组件。不幸的是,由于JS不是静态类型的,所以没有捕获到我的错误,并且花了一些时间才弄清楚发生了什么。

要解决此错误,请在渲染组件之前检查组件,以确保它是您期望的组件类型。

GO村村 2020.03.13

对于未来的Google员工:

我对这个问题的解决办法是升级reactreact-dom对新公共管理的最新版本。显然我正在导入使用新片段语法的Component,并且在我的旧版React中已将其破坏。

十三Stafan 2020.03.13

当我在渲染/返回语句中引用错误时,就发生了这个问题。(指向不存在的类)。还要检查您的退货声明代码是否有错误的引用。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android