首先来一次问题的描述吧,个人感觉这样学习的方法不错。
关于Redux中state改变而render不渲染的问题。
实际问题场景如下:
数据:一个数组dateList,一个对象activeObj。
["2013","2014"],{}
在手风琴组件内,我们根据数组遍历生成对应List,并为其添加onChange监听。
理想效果为,根据点击的List发送ajax请求,在请求完成之前显示loading,并在ajax请求完成后显示相应数据。
实际效果为,无论你点击哪一个,都显示loading。
错误代码为:
// 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刷新我们的视图。
总结
基本概念要熟,爬坑才足够迅捷,抓虫不要想的太复杂,错的往往都很简单。
PS:自己封装些异步请求组件吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。