React useReducer撤销功能past[past.length-1]返回数组问题咨询

问题原因 #

你对past数组的存储内容理解有误，才会出现预期和实际运行不符的情况：

• 你在ADD分支的逻辑是：每次新增商品时，会把新增前完整的购物清单数组（也就是当前的present） push 到past数组里。也就是说past的每一项元素都是完整的历史购物清单数组，不是单个商品对象。

举个实际运行场景验证：

1. 初始状态：past = []，present = []
2. 第一次添加商品「牛奶」：
   past 会变成 [ [] ]（存了新增前的空清单），present 变成 [{id:xx, name:'牛奶'}]
3. 第二次添加商品「鸡蛋」：
   past 会变成 [ [], [{id:xx, name:'牛奶'}] ]（存了新增前只有牛奶的清单），present 变成 [{id:xx, name:'牛奶'}, {id:yy, name:'鸡蛋'}]
4. 此时点击Undo触发UNDO分支，past[past.length - 1] 取到的就是past数组最后一项，也就是[{id:xx, name:'牛奶'}]这个完整的历史清单数组，赋值给present后自然就是去掉了最后一项「鸡蛋」的完整清单，和你观察到的运行效果完全一致。

额外问题提醒 #

你当前代码还有两处明显错误需要修复：

• UNDO分支里的canRede是拼写错误，正确属性名是canRedo
• REDO分支逻辑为空，点击重做按钮会丢失所有状态

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