React-redux使用中有关Provider问题
先上错误:
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Provider`, expected a single ReactElement. in Provider (at index.js:8)
React.Children.only expected to receive a single React element child.
代码:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import store from './redux/Store' import App from './self-component/Router' ReactDOM.render(<Provider store={store} > <App /> </Provider> ,document.getElementById('root'))
原因:
原因是吧Provider放错地方了。应该放在路由表的根路由的位置。这样每次数据修改后,就会从根路由开始重新渲染其他组件
改正:
就是在要 return 的最外层包一层 <Provider>...</Provider> main.js
import React,{Component} from 'react'
import {Link, IndexLink, hashHistory} from 'react-router'
import {Provider} from 'react-redux'
import '../styles/common.css'
import '../styles/main/main.css'
class Main extends Component{
render(){
return(
<Provider>
<div className="main">
<div className='component'>
{this.props.children}
</div>
<div className='foot'>
<div className='foot-block'>
<IndexLink to='/' activeClassName='active'>
<dl className="homePage">
<dt className="iconfont"></dt>
<dd>首页</dd>
</dl>
</IndexLink>
</div>
</div>
</div>
</Provider>
)
}
}
export default Main
React-redux使用中有关Provider问题的更多相关文章
- react+redux+generation-modation脚手架添加一个todolist
当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...
- react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...
- React Redux 与胖虎
这是一篇详尽的 React Redux 扫盲文. 对 React Redux 已经比较熟悉的同学可以直接看 <React Redux 与胖虎他妈>. 是什么 React Redux 是 R ...
- [Redux] Passing the Store Down with <Provider> from React Redux
Previously, we wrote the Provider component by ourself: class Provider extends Component { getChildC ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
随机推荐
- .NET Core开源API网关 – Ocelot中文文档
Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由.请求聚合.服务发现.认证.鉴权.限流熔断.并内置了负载均衡器与Service Fabric.Butterfly ...
- 谁能用通俗的语言解释一下什么是 RPC 框架?
转载自知乎:https://www.zhihu.com/question/25536695 知乎上很多问题的答案还是很好的,R大就经常在上面回答问题 关于RPC你的题目是RPC框架,首先了解什么叫RP ...
- Spring源码学习:第2步--使用SLF4j+Log4j日志框架替换掉其自身的commons-logging日志框架
正如Spring官方文档所述,其底层的实现选择了commons-logging作为日志框架.这一"失足"性的选择,竟连Spring自身都抱怨.但是,谁叫Spring如此优秀呢,即使 ...
- BAT脚本/Dos 改ip地址
BAT脚本/Dos 改ip 经常换地方上网,总改这些很麻烦,直接写三个bat,点一下就换了.需要管理员权限.之前用python的wmi写过,但是没起作用. ip:10.10.41.15 子网掩码:25 ...
- UnderScore的使用实例记录
集合操作 _.range(),主要用于区间的获取操作.参数说明:(param1):范围上限,(param1,param2):起始及结束范围,(param1,param2,param3):起始结束范围, ...
- Python 中 Iterator(迭代器)和Iterable(迭代对象)的区别
直接可以用作for循环的数据类型有以下几种: tuple.list.dict.str等, 上述数据类型可以用作for循环的叫做可迭代对象Iterable.可以使用isinstance判断一个对象是否是 ...
- 随记PC-win7 64位系统网络连接状态一直转圈、等待状态的异常解决方案
各位看官好~ 最近电脑也做了下升级,入手个士必得360G的SSD来玩玩,顺便也下个新系统,看看有什么区别,想想顺便升级下系统也是好的,就开始了装机,装系统的路程~~~~~~ 好了不说废话,直接进入主题 ...
- shell死循环脚本示例
1.设计一个脚本,监控远程的一台机器(假设ip为192.168.0.28)的存活状态,当发现宕机时发一封邮件给你自己. 提示:1. 你可以使用ping命令 ping -c10 www.baidu. ...
- MaxPooling的作用
maxpooling主要有两大作用 1. invariance(不变性),这种不变性包括translation(平移),rotation(旋转),scale(尺度)2. 保留主要的特征同时减少参数(降 ...
- [Scala] 实现 NDCG
一.关于 NDCG [LTR] 信息检索评价指标(RP/MAP/DCG/NDCG/RR/ERR) 二.代码实现 1.训练数据的加载解析 import scala.io.Source /* * 训练行数 ...