[英]Invalid prop children in Provider
I've been learning React for the past several weeks. 过去几周我一直在学习React。
First developed a simple Chat with plain React, and now I started integrating Redux into my app. 首先使用简单的React开发了一个简单的聊天,现在我开始将Redux集成到我的应用程序中。
I added a simple Action, a matching Reducer (along with a root reducer) and a Store. 我添加了一个简单的Action,一个匹配的Reducer(以及一个root reducer)和一个Store。 I then reached the part where I need to use the Provider from the react-redux library:
然后我到达了需要使用react-redux库中的Provider的部分:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import ConfigureStore from './Store/ConfigureStore';
import Routes from './Routes';
const store = ConfigureStore();
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}
routes={Routes} />,
</Provider>,
document.getElementById('root')
);
App compiles fine, but I receive the following errors in console: 应用程序编译正常,但我在控制台中收到以下错误:
Warning: Failed prop type: Invalid prop
children
of typearray
supplied toProvider
, expected a single ReactElement.警告:失败的prop类型:提供给
Provider
的类型为array
无效propchildren
项,期望单个ReactElement。 in Provider在提供者
and 和
Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.
未捕获的不变违规:React.Children.only预计会收到一个React元素子。
I'm using the React Create App as a starter kit. 我正在使用React Create App作为入门套件。
You have a ,
after <Router history={browserHistory} routes={Routes} />
在
<Router history={browserHistory} routes={Routes} />
之后,
您有一个
Try removing it? 尝试删除它?
The same error: 同样的错误:
Warning: Failed prop type: Invalid prop
children
of typearray
supplied toProvider
, expected a single ReactElement.警告:失败的prop类型:提供给
Provider
的类型为array
无效propchildren
项,期望单个ReactElement。Uncaught Error: React.Children.only expected to receive a single React element child.
未捕获的错误:React.Children.only预计会收到一个React元素子元素。
Occurs to me in writing Provider with this format: 使用以下格式编写Provider时发生在我身上:
<Provider store={store}> <App4Connected /> </Provider>
instead the following works correctly: 而是以下工作正常:
<Provider store={store}>
<App4Connected />
</Provider>
To me writing in this format was throwing error: 对我来说,用这种格式写错了:
ReactDOM.render(<Provider store={store}> <App /> </Provider>, document.getElementById('root'));
But this works fine: 但这很好用:
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.