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 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
随机推荐
- 云计算之路-阿里云上:docker swarm 问题最新进展
今天中午我们在 docker swarm 集群上发布应用时遇到了一个奇怪的 docker swarm 内置负载均衡的问题,该应用的 2 个新容器成功启动后,在容器内访问正常,但通过服务名访问时一会正常 ...
- 数据库学习笔记 4 强大的SQL
其实这篇文章应该至少一个星期前就应该更新了,但是最近小猿我和喜欢了好多年的女神牵手成功,所以这些天有点飘. ---创建表结构 create table tablename ( id int, name ...
- python学习03-数据类型
一.基本数据类型--数字 布尔型 bool型只有两个值:True和False 之所以将bool值归类为数字,是因为我们也习惯用1表示True,0表示False. 以下是布尔值是False的各种情况: ...
- spring Boot+spring Cloud实现微服务详细教程第一篇
前些天项目组的大佬跟我聊,说项目组想从之前的架构上剥离出来公用的模块做微服务的开发,恰好去年的5/6月份在上家公司学习了国内开源的dubbo+zookeeper实现的微服务的架构.自己平时对微服务的设 ...
- Linux Vim查找字符串
一.用/和?的区别:/后跟查找的字符串.vim会显示文本中第一个出现的字符串.?后跟查找的字符串.vim会显示文本中最后一个出现的字符串.二.注意事项:不管用/还是?查找到第一个字符串后,按回车,vi ...
- c++ --> 返回值分析
返回值分析 函数不能通过返回指向栈内存的指针,返回指向堆内存的指针是可以的. 一.返回局部变量的值 可以有两种情况:返回局部自动变量和局部静态变量,比如: int func() { ; // 返回局部 ...
- 查看http的并发请求数与其TCP连接状态
[root@new-web7 ~ ::]#netstat -na | awk '/^tcp/ {++S[$NF]} END {for(i in S) print i, S[i]}' TIME_WAIT ...
- 转)sqlite 数据类型
一般数据采用的固定的静态数据类型,而SQLite采用的是动态数据类型,会根据存入值自动判断.SQLite具有以下五种数据类型: 1.NULL:空值. 2.INTEGER:带符号的整型,具体取决有存入数 ...
- CentOS7搭建solr7.2
solr介绍 一.Solr它是一种开放源码的.基于 Lucene Java 的搜索服务器,易于加入到 Web 应用程序中. 二.Solr 提供了层面搜索(就是统计).命中醒目显示并且支持多种输出格式( ...
- 利用1.1.1.1进行DNS网络加速,仅需2分钟让网络更快
NEWS 近日,Cloudflare 和 APNIC联合推出了1.1.1.1DNS网络加速. Cloudflare 运行全球规模最大.速度最快的网络之一.APNIC 是一个非营利组织,管理着亚太和大洋 ...