React Redux Saga中某组件mapStateToProps生效但render未触发问题

你的SliderWrapper组件明明拿到了Store里的remoteArticles却不触发render，核心问题出在**shouldComponentUpdate方法的逻辑错误**，以及对props的错误解构上，具体分析和修复如下：

1. 核心错误：shouldComponentUpdate逻辑完全颠倒 #

先看你写的这段代码：

shouldComponentUpdate(nextProps) {
  const { updateCount } = nextProps; // 错误1：父组件传的是`updateCounter`，不是`updateCount`
  const { updateCounter } = this.props;
  if (updateCounter !== updateCount) {
    return false; // 错误2：逻辑反了！props变化时应该返回true允许更新，返回false会直接阻止渲染
  }
  return true;
}

• 变量名错误：父组件Timeline传给SliderWrapper的props是updateCounter={updateCount}，所以nextProps里的属性名是updateCounter，你解构错了变量；
• 逻辑颠倒：当updateCounter变化时，你返回false，这会直接阻止组件重新渲染——哪怕你的articles（也就是Store里的remoteArticles）已经更新了。

2. 第二个问题：未监听articles的变化 #

当前的shouldComponentUpdate只判断了updateCounter的变化，完全没考虑articles的更新——这才是你最关心的场景：当Store里的remoteArticles变化时，SliderWrapper应该重新渲染。

修复后的shouldComponentUpdate方法 #

把方法改成这样，既监听articles的变化，也修正updateCounter的判断逻辑：

shouldComponentUpdate(nextProps) {
  // 用lodash的isEqual做深比较，因为articles是复杂对象/数组，直接===比的是引用地址
  const articlesChanged = !la.isEqual(this.props.articles, nextProps.articles);
  // 修正变量名，判断updateCounter是否变化
  const counterChanged = this.props.updateCounter !== nextProps.updateCounter;

  // 只要articles或updateCounter有一个变化，就允许组件更新
  return articlesChanged || counterChanged;
}

解释：

• 使用lodash.isEqual是因为articles是包含数组的复杂对象，浅比较无法识别内部数据的变化；
• 逻辑调整为只要需要关心的props有变化，就返回true触发渲染，完全符合你的需求。

额外优化建议 #

1. 替换为PureComponent：如果你的组件只需要做props/state的比较，可以直接继承React.PureComponent，它会自动帮你做浅比较，避免手动写shouldComponentUpdate出错；
2. 简化父组件的changeUpdateCount：

changeUpdateCount() {
  this.setState(prevState => ({
    updateCount: prevState.updateCount + 1
  }));
}

用函数式setState更安全，避免依赖state的旧值导致的更新异常。

修复后，当Store里的remoteArticles更新时，articlesChanged会变为true，shouldComponentUpdate返回true，SliderWrapper就会触发render方法，渲染新的文章数据了。

内容的提问来源于stack exchange，提问作者Kid