反应错误'失败的propType：提供给'Provider'的无效道具'children'，需要一个ReactElement'

Posted 2023-02-22

【中文标题】反应错误\'失败的propType：提供给\'Provider\'的无效道具\'children\'，需要一个ReactElement\'

【英文标题】：React error 'Failed propType: Invalid prop `children` supplied to `Provider`, expected a single ReactElement'反应错误'失败的propType：提供给'Provider'的无效道具'children'，需要一个ReactElement'

【发布时间】：2016-08-12 15:15:33

【问题描述】：

我对 React.js 有一些问题。 这是我的代码：

import React from 'react';
import  createStore  from 'redux';
import  Provider  from 'react-redux';
import App from './containers/App';
import todoApp from './reducers';

let store = createStore(todoApp);
let rootElement = document.getElementById('root');

React.render(
    <Provider store=store>
        () => <App />
    </Provider>,
    rootElement
);

然后运行页面，它说：

失败的 propType：无效的 prop children 提供给 Provider，需要一个 ReactElement

这是我安装的相关节点模块列表：

反应 15.0.1 react-redux 4.4.5 redux 3.4.0

实际上，我目前正在使用 Redux 学习 React，所以我很难做到。我只是按照网站上的教程进行操作（我可以提供链接，但它不是英文的）但它只是无法处理该错误消息。 当我搜索时，有人说升级版本的 react 和 react-redux，但我安装了最新版本。 任何建议将不胜感激。

【参考方案1】：

根据the doc，您可以只使用普通的 React 元素而不是 <Provider /> 中的函数。

因此，只需将代码更改为

<Provider store=store>
    <App />
</Provider>

我认为这在 react@0.14 之后发生了变化。

【参考方案2】：

原来的问题有错别字。您的回答在正确的语法中是正确的。

但是，直接原因是<App />需要单独一行。

如果你把它和<Provider store=store>放在同一行，React/Redux 会尝试用它做更多的事情。

ReactDOM.render(
<Provider store=store>
  <App />
</Provider>,
  document.getElementById('root')
);

【讨论】：

您能澄清一下您的意思吗？换行符不应该对 JSX 的解释方式产生任何影响。捆绑时大部分空格都会被删除。

【参考方案3】：

我被带到了这里，我只是忘了提供道具。我想说确保您提供了所有组件正在使用的道具，并且应该修复它。