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

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

我定义了一个Proptype错误：

ids: PropTypes.array(PropTypes.string)

它应该是：

ids: PropTypes.arrayOf(PropTypes.string)

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

这是一些必须调试的错误。正如许多次所说的，不正确的导入/导出会导致此错误，但是令人惊讶的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" }} />)}
    />
);

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

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

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

const MyContext = () => createContext()

但这应该定义为：

const MyContext = createContext()

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

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

我错过了一个React Fragment：

function Bar({ children }) {

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

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

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

<Bar>
  <>
    <Baz/>
    <Qux/>
  </>
</Bar>

简而言之，以下情况正在发生：

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

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

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

    return (
        <MyComponent />
    );
}

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

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

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

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

对于未来的Google员工：

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

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