React/Redux Store已更新但组件未重新渲染问题求助

哇，这个问题我之前踩过好几次坑！既然你已经排除了最常见的两个错误——正确用connect包装了组件、reducer也返回了新的state对象，那咱们就从几个容易被忽略的角度来排查：

1. 检查mapStateToProps的返回值是否触发浅比较 #

Redux的connect默认会对mapStateToProps返回的props做浅比较：如果前后两次返回的props对象里的属性引用没变化，组件就不会重渲染。

• 如果你在mapStateToProps里直接返回state.todos，那得确保reducer里确实返回了全新的数组引用（比如用[...state.todos, newTodo]而不是state.todos.push(newTodo)后返回原数组）。虽然你说没直接修改原state，但有时候可能不小心写了类似const todos = state.todos; todos.push(newTodo); return {...state, todos}的代码——这种写法看起来是返回新state，但todos还是原数组的引用，DevTools可能会显示todos更新了，但组件的浅比较会认为props没变化。
• 如果你在mapStateToProps里对todos做了转换（比如过滤、排序），一定要确保返回的是新数组/对象，比如用state.todos.filter(...)（返回新数组）而不是直接修改原数组后返回。

2. 检查组件是否被意外阻止了重渲染 #

• 如果你给Body组件用了React.memo，检查自定义的比较函数是不是错误地返回了true（表示props没变化，不需要重渲染）。默认的React.memo是浅比较，如果你自定义了比较逻辑，很可能在这里出问题。
• 检查组件内部有没有shouldComponentUpdate生命周期函数，是不是写了错误的判断逻辑导致返回false，阻止了重渲染。

3. 确认connect的使用是否完全正确 #

虽然你说已经用了connect，但还是可以再核对下：

• 有没有把mapStateToProps和mapDispatchToProps的位置搞反？connect的第一个参数是mapStateToProps，第二个是mapDispatchToProps，如果第一个传了null，组件就不会订阅store的变化——不过你说初始数据能渲染，这个可能性不大，但可以快速确认下。
• 检查connect包装的是不是正确的组件：比如你是不是把connect用在了Body的父组件上，但父组件没把todos props传递给Body？虽然初始数据能渲染，但如果父组件在更新后没正确传递props，Body也不会拿到新数据。

4. 检查Redux Store的reducer组合逻辑 #

• 如果你用了combineReducers，确认todos对应的reducer是不是正确处理了ADD_TODO action。比如有没有多个reducer都处理了ADD_TODO，其中某个reducer覆盖了正确的更新？
• 检查reducer里的初始state是不是正确设置，有没有在action处理时不小心返回了初始state而不是更新后的state。

5. 临时测试：强制组件重渲染 #

可以做个简单的测试来定位问题：在Body组件的componentDidUpdate里打印this.props.todos，看看dispatch后props有没有更新。

• 如果props更新了，但组件没渲染，那问题出在组件本身的渲染逻辑（比如条件渲染写错了）。
• 如果props没更新，那问题还是在Redux的数据流里（mapState或者reducer的引用问题）。

希望这些排查点能帮你找到问题！

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