先上错误:

  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问题的更多相关文章

  1. react+redux+generation-modation脚手架添加一个todolist

    当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...

  2. react+redux+generation-modation脚手架搭建一个todolist

    TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...

  3. React Redux 与胖虎

    这是一篇详尽的 React Redux 扫盲文. 对 React Redux 已经比较熟悉的同学可以直接看 <React Redux 与胖虎他妈>. 是什么 React Redux 是 R ...

  4. [Redux] Passing the Store Down with <Provider> from React Redux

    Previously, we wrote the Provider component by ourself: class Provider extends Component { getChildC ...

  5. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  7. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  8. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  9. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  10. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

随机推荐

  1. GeoJSON JS判断某一点是否在某一区域范围之内

    GeoJSON JS判断某一点是否在某一区域范围之内 算法: function isInPolygon(checkPoint, polygonPoints) { var counter = 0; va ...

  2. Java中动态代理工作流程

    当谈到动态代理就会想到接口,因为接口是一种规范,动态代理对象通过接口便会很清楚地知道他的实现类(被代理对象)是何种类型的(即有哪些方法).Now,然我们来开始编写一个例子来了解动态代理的全过程: 第一 ...

  3. Spring之<context:property-placeholder location="classpath:... "/>标签路径问题

    <context:property-placeholder location="classpath:...  "/>中classpath:是src目录下的意思:所以加载 ...

  4. php类中双冒号和->的区别

    就是为了区分对象的方法和属性,和是访问类的静态方法和静态变量,类的静态方法和静态变量是类公用的,不需要实例化也能访问,而对象的方法和属性是每个对象特有的,因此必须先实例化.其他语言如C++,JAVA等 ...

  5. 【前端单元测试入门05】react的单元测试之jest

    jest jest是facebook推出的一款测试框架,集成了前面所讲的Mocha和chai,jsdom,sinon等功能. 安装 npm install --save-dev jest npm in ...

  6. SpringBoot工作机制

    1:前言 回顾探索Spring框架 1.spring ioc IoC其实有两种方式,一种就是DI,而另一种是DL,即Dependency Lookup(依赖查找),前者是当前软件实体被动接受其依赖的其 ...

  7. 面向服务的体系架构 SOA(三) --- Zookeeper API、zkClient API的使用

    zookeeper简单介绍及API使用 1.1 zookeeper简介 zookeeper是一个针对大型分布式系统的可靠的协调系统,提供的功能包括配置维护.名字服务.分布式同步.组服务等.zookee ...

  8. 笔记:I/O流-文件操作

    Java库中使用 Path 和 Files 类封装了在用户机器上处理文件系统所需要的所有功能,可以使用Paths来获取一个具体的Path对象,来表示具体的路径. 路径 Path表示的是一个目录名序列, ...

  9. linux --> Linux变量之$#, $*, $@含义

    Linux变量之$#, $*, $@含义 一.介绍 $# //是传给脚本的参数个数 $ //是脚本本身的名字 $1 //是传递给该shell脚本的第一个参数 $ //是传递给该shell脚本的第二个参 ...

  10. [转]C++ 初始化列表的初始化顺序

    构造函数初始化列表仅用于初始化成员的值,并不指定这些初始化执行的次序.成员被初始化的次序就是定义成员的次序.第一个被定义的成员先被初始化,依次类推.一般,初始化的顺序无关紧要,然而,如果一个成员是根据 ...