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 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
随机推荐
- Redis 安装简介
Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了Jav ...
- 利用CDLinux里面的水滴破解路由器密码的教程
工具: 1.CDLinux系统镜像(网上有很多,这里我提供一个我使用的:http://yunpan.cn/cFgIifL8s6zUF 访问密码 a0ef) 2.U盘一个,不需要很大.(可以使用虚拟机安 ...
- TCP 连接关闭及TIME_WAIT探究
这里主要记录一下TCP连接在关闭的时刻,有哪些细节问题.方便在以后的程序设计中能够注意这些细节, 以避免出现这些错误.首先我们来看一下TCP的状态转换图.如<unix网络编程>卷一所示如下 ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- vue简单的自由拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascript数组Array强大的splice()方法
javascript的Array数组提供了强大的splice()方法, 用于对数组元素的增删改 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 删除: ...
- windows 设置/修改全局快捷键
打开控制面板,小图表显示下 点击 管理工具项, 将自己想要谁知快捷键的程序的快捷方式放进去,(需要确认管理员权限) 如图,第一个即为 lz添加的 右击选择属性 在快捷键处同时按下你想要的组合键即可(不 ...
- 网络通信 --> Socket、TCP/IP、HTTP、FTP及网络编程
Socket.TCP/IP.HTTP.FTP及网络编程 聊聊Socket.TCP/IP.HTTP.FTP及网络编程
- linux --> Linux 的启动流程
Linux 的启动流程 操作系统接管硬件以后发生的事情,也就是操作系统的启动流程. 因为在BIOS阶段,计算机的行为基本上被写死了,程序员可以做的事情并不多:但一旦进入操作系统,程序员几乎可以定制所有 ...
- 2017-11-15 软件包 java.io学习
接口摘要 一.接口Closeable 方法摘要:void:close();关闭此流并释放与此流关联的所有系统资源.如果已经关闭该流,则调用此方法无效 涉及的异常信息:IOException ----- ...