如何在React对象数组中移动元素位置？（useState场景）

原代码问题分析 #

你之前的moveUp函数存在逻辑错误：赋值表达式([entries[index - 1], entries[index]] = [...])的返回值是交换后的两个元素组成的数组，而非完整的原数组。因此当数组元素数量超过两个时，调用该函数会直接把entries替换成仅包含这两个元素的数组，导致其余元素丢失。

正确实现方案 #

要实现元素的上下移动，核心是创建原数组的副本（避免直接修改React state），交换指定索引的元素后再更新state。

1. 修正后的上移函数

const moveUp = (index) => {
  // 边界校验：第一个元素无法上移
  if (index <= 0 || index >= entries.length) return;

  // 创建数组浅拷贝，遵循React state不可变原则
  const newEntries = [...entries];
  // 交换当前元素与前一个元素的位置
  [newEntries[index - 1], newEntries[index]] = [newEntries[index], newEntries[index - 1]];
  // 更新状态
  setEntries(newEntries);
};

2. 补充下移函数（可选）

如果需要支持下移功能，可以添加以下函数：

const moveDown = (index) => {
  // 边界校验：最后一个元素无法下移
  if (index < 0 || index >= entries.length - 1) return;

  const newEntries = [...entries];
  // 交换当前元素与后一个元素的位置
  [newEntries[index], newEntries[index + 1]] = [newEntries[index + 1], newEntries[index]];
  setEntries(newEntries);
};

3. 更新后的JSX代码

可以给按钮添加禁用状态，避免无效操作：

{entries.map((item, index) => (
  <div key={item.id}>
    <h4>{item.person}</h4>
    <button onClick={() => moveUp(index)} disabled={index === 0}>Move Up</button>
    <button onClick={() => moveDown(index)} disabled={index === entries.length - 1}>Move Down</button>
  </div>
))}

关键说明 #

• 使用[...entries]创建数组副本，确保不会直接修改原state数组，符合React的状态更新规范。
• 交换元素时使用解构赋值语法，简洁高效。
• 添加边界校验和按钮禁用状态，提升交互体验。

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