React中state数组首元素移至末尾：求底层原理与解决方案

底层运行原理 #

React的setState采用异步批量更新机制：在同一个事件回调（比如onClick）里多次调用setState，React不会立即执行每一次状态变更，而是将这些更新请求放入队列，等事件处理结束后再批量合并处理。

你代码里的核心问题：

1. 第一次调用setCollection((old) => old.filter(...)是函数式更新，会基于旧状态生成新数组，但这个更新还未生效；
2. 紧接着调用setCollection([...collection, newElement])，这里的collection是事件触发时的旧状态值（状态还没完成更新），且这次更新会覆盖之前的队列请求，最终React只执行这一次更新，导致结果变成旧数组拼接首元素，而非删除首元素后再添加。

另外，filter(v => v !== newElement)存在隐藏bug：如果数组内有重复元素（比如两个"one"），会把所有匹配项都删除，不符合「仅移动第一个元素到末尾」的需求。

正确解决方案 #

只需一次setCollection调用，基于旧状态直接生成目标数组，推荐两种写法：

写法1：数组解构语法 #

<button
  onClick={() => {
    setCollection(old => {
      const [first, ...rest] = old;
      return [...rest, first];
    });
  }}
>
  Click me
</button>

写法2：slice + concat组合 #

<button
  onClick={() => {
    setCollection(old => {
      return old.slice(1).concat(old[0]);
    });
  }}
>
  Click me
</button>

两种写法都依赖函数式更新（给setCollection传入回调），确保始终基于最新的旧状态生成新数组，既避免了异步更新带来的状态不一致问题，也能精准实现「首元素移至末尾」的需求，不会误删重复元素。

为什么单独使用filter或展开运算符能工作？ #

• 单独调用filter时，只触发了一次setState，React会正确执行该更新；
• 单独调用[...collection, newElement]时，同样是单次setState，能正确完成拼接，但这不是你需要的最终效果；
• 两者结合时，两次setState被批量合并，第二次更新覆盖了第一次，导致结果不符合预期。

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