redux-toolkit多dispatch顺序调用时运行时报Hooks渲染异常问题

错误根因 #

你遇到的Rendered fewer hooks than expected报错和dispatch执行顺序完全无关：

• Redux Toolkit 默认的dispatch都是同步执行的，你写的三个dispatch本来就是串行按顺序执行的，不存在并行问题，调试阶段能正常运行也验证了这点。
• 报错本质是React Hooks调用规则被违反，触发原因是你执行dispatch(pointRemove(point_id))删除当前点后，当前PointItem组件对应的point_id数据已经从store中移除，下一次渲染时useSelector查询不到对应点数据返回undefined，你在组件顶层直接访问point.path_id、point.order等属性导致渲染中途中断，实际调用的Hook数量比React预期的少，因此抛出该错误。

修复方案 #

1. 加非空判断提前返回
   在所有Hook调用完成后、其他业务逻辑之前，加point非空判断，避免后续逻辑访问空对象属性，且保证所有Hook都完成调用：

// 所有Hook调用完之后新增这段判断
if (!point) return null;

2. 替换直接调用store.getState()的取值逻辑
   不要直接操作store实例拿prev_point和next_point，改为用useSelector响应式取值，同时加可选链兼容空值场景：

const prev_point = useSelector(state => 
  point ? selectPointByPathIDAndOrder(point.path_id, point.order - 1)(state)[0] : undefined
);
const next_point = useSelector(state => 
  point ? selectPointByPathIDAndOrder(point.path_id, point.order + 1)(state)[0] : undefined
);

3. 父组件同步过滤已删除节点
   确保渲染PointItem列表的父组件，会根据store中的点ID列表过滤渲染项，被删除的point_id对应的组件直接销毁，不会继续渲染。
4. 检查选择器实现
   确认selectPointByPathIDAndOrder是普通的reselect选择器（纯函数），内部没有调用任何React Hook，否则会违反Hook只能在组件顶层调用的规则。

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