首先来一次问题的描述吧,我的感受这样学习的方法不错。ajax
实际问题场景以下:数组
数据:一个数组dateList,一个对象activeObj。
["2013","2014"],{}
在手风琴组件内,咱们根据数组遍历生成对应List,并为其添加onChange监听。异步
理想效果为,根据点击的List发送ajax请求,在请求完成以前显示loading,并在ajax请求完成后显示相应数据。
实际效果为,不管你点击哪个,都显示loading。学习
错误代码为:this
// ajax请求后处理res .then(res=>{ let result; if(!this.props.activeObj){ // 处理默认状况 result={ [date]:res.data.shiftList }; }else{ // 问题关键部分 result = this.props.activeObj; result[date] = res.data.shiftList; } this.props.setActiveObj({ payload: result });
而错误主要缘由是没有好好理解Redux中state究竟是个什么东西。
咱们在经过this.props.setActiveObj(一个封装的dispatch)修改了activeObj对象。
而Redux中state树的改变是受咱们操做影响的。result = this.props.activeObj
仅仅只是赋值了引用,而咱们的修改 result[date] = res.data.shiftList
也是在原来的activeObj对象上修改。因此致使结果是Redux没有发现state树的变化,因此并无触发render刷新咱们的视图。spa
基本概念要熟,爬坑才足够迅捷,抓虫不要想的太复杂,错的每每都很简单。
PS:本身封装些异步请求组件吧。code