警告：失败的道具类型：提供给`Provider`的类型`object`的prop`child`无效，期望一个ReactElement

Question

我遇到了问题：

Warning: Failed prop type: Invalid prop children of type object supplied to Provider, expected a single ReactElement.

我现在已经找了一个答案，但无法解决这个问题。我的反应版本是15.3.0。

感谢〜

children

Answer 1

我要做一些断言，因为细节很少，但是这个错误发生在一个非常具体的情况中，稍后会详细解释。具体而言，如果在babel-polyfill之前导入React或ReactDOM（但不是两者），则会发生这种情况。如果之前都输入了，那很好。如果两者都是后来导入，那也没关系。现在，我的答案的断言是您使用react-hot-loader/patch作为第一个入口点，而不是babel-polyfill。

Babel-polyfill文档明确说明了front page no less：

  

要包含您需要的polyfill，需要它在应用程序入口点的顶部。

     

确保在所有其他代码/ require语句之前调用它！

虽然你可以解决这个问题，但是如果这样做的话你必须要小心。因此，假设webpack的问题最简单的解决方案是使您的入口点配置如下

entry: {
    'babel-polyfill',
    'react-hot-loader/patch',
    ...
}

这不是唯一的解决方案，请阅读下面的完整说明，了解如果添加入口点不是一个选项（例如，由于希望减少入口点块大小），如何避免此问题

技术说明

patch.dev.js导入react-hot-loader/patch中的

React。由于尚未加载babel-polyfill且某些浏览器尚未提供Symbol，因此React会将其REACT_ELEMENT_TYPE constant设置为数字形式而非Symbol。 ReactDOM将独立于React为自己执行相同的常量定义。但是，如果现在在ReactDOM之前导入babel-polyfill，则在导入ReactDOM时，Symbol现在可用，因此ReactDOM的常量在Symbol表单而不是数字形式中定义。因此，您的React和ReactDOM具有不同的REACT_ELEMENT_TYPE，并且ReactDOM无法将React组件与其他对象区分开来。