记一次Redux中异步请求数据render不执行的问题

2024年4月14日 163次阅读 来源: thewindsword

首先来一次问题的描述吧，个人感觉这样学习的方法不错。

关于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：自己封装些异步请求组件吧。

    原文作者：thewindsword
    原文地址: https://segmentfault.com/a/1190000016209517
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞