Javascript 反应错误“道具类型失败:提供给“提供者”的道具“儿童”无效,需要一个 ReactElement”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36735397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:30:38  来源:igfitidea点击:

React error 'Failed propType: Invalid prop `children` supplied to `Provider`, expected a single ReactElement'

javascriptreactjsreduxreact-redux

提问by modernator

i have some problem with React.js. this is my code:

我对 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
);

and runs the page, it saids:

并运行页面,它说:

Failed propType: Invalid prop childrensupplied to Provider, expected a single ReactElement

失败的 propType:children向 提供了无效的 prop Provider,需要一个 ReactElement

this is the list of my related installed node modules:

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

  • react 15.0.1
  • react-redux 4.4.5
  • redux 3.4.0
  • 反应 15.0.1
  • 反应-redux 4.4.5
  • 还原 3.4.0

actually, i am currently learning React with Redux, so it is hard to me how should i do. i just followed tutorial on website(i can give a link, but it is not english) but it is just not working with that error message. as i searched, someone said upgrade version of react and react-redux, but i installed latest versions. any advice will be very appreciate it.

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

采纳答案by wuct

According to the doc, you can just use a normal React element instead of a function inside <Provider />.

根据文档,您可以只使用普通的 React 元素而不是内部的函数<Provider />

As a result, simply change your code to

因此,只需将您的代码更改为

<Provider store={store}>
    <App />
</Provider>

I think this has changed since [email protected].

我认为自 [email protected] 以来这已经发生了变化。

回答by nick rodriguez

The original question had a typo. Your response is correct in the proper syntax.

最初的问题有一个错字。您的回复在正确的语法中是正确的。

However, the direct reason is that <App />needs to be on a separate line.

但是,直接原因是<App />需要在单独的行上。

If you put it on the same line as <Provider store={store}>React/Redux tries to do more with it than it should.

如果你把它和<Provider store={store}>React/Redux放在同一行,尝试用它做比它应该做的更多的事情。

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

回答by str8up7od

I was brought to this and I simply forgot to provide a prop. I would say make sure that you are providing allthe props that your component is using and that shouldfix it.

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