React中如何正确实现数组pop并unshift的非破坏性旋转操作？

问题原因 #

你代码里的prevArray.pop()是破坏性数组操作，会直接修改传入的前状态数组prevArray：

• pop()会移除prevArray的最后一个元素并返回它，此时prevArray本身已经变成了去掉最后一个元素的数组。
• 后续返回[lastLetter, ...prevArray]时，展开的是已经被修改后的prevArray，违反了React状态的不可变性原则，导致出现元素丢失的异常结果。

正确解决方案 #

遵循React状态不可变性原则，通过非破坏性操作创建新数组：

setRotar1((prevArray) => {
  // 获取最后一个元素，不修改原数组
  const lastLetter = prevArray[prevArray.length - 1];
  // 截取原数组除最后一个元素外的所有部分，返回新数组
  const restArray = prevArray.slice(0, -1);
  // 组合成新数组返回
  return [lastLetter, ...restArray];
});

或者更简洁的写法：

setRotar1((prevArray) => [
  prevArray[prevArray.length - 1],
  ...prevArray.slice(0, -1)
]);

核心原则 #

在React中处理数组状态时，永远不要直接修改原状态数组：

• 避免使用pop/push/shift/unshift/splice这类会修改原数组的方法。
• 优先使用slice、扩展运算符（...）、concat等方法创建新数组，确保状态更新的可预测性。

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