setRows(prev => {
  const next = [...prev];
  [next[i - 1], next[i]] = [next[i], next[i - 1]];
  return next;
});

表格里点“上移”,用 splice 换了顺序,console 打印已经变了,页面纹丝不动。新增一条记录后总数也不更新。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。

原因不复杂,原地修改数组后引用没变,React 用 Object.is 比较发现是同一个对象,直接跳过更新。Redux 里同样会认为状态没有变化。

「深层对象不可变更新」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。

验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

处理上按这个顺序:改成返回新数组 用 slice 加 concat 或展开运算符;对象嵌套时逐层复制 或者用 immer 的 produce;确认 reducer 返回的不是原引用;改完点上移 看行序和总数是否同时变化。

改完只确认一件事:点击上移后两行顺序立即交换,新增记录后计数同步加一。

作者 9823189