React Native中实现数组状态内指定对象上移的方法

这事儿我之前做列表拖拽排序的时候也碰到过，核心要记住React的state是不可变的，绝对不能直接修改原items数组，得基于原数组生成新的副本再更新状态，同时加上索引判断就行。

具体实现步骤如下：

1. 先做边界判断：如果当前元素的索引是0，直接终止函数，不让它继续上移
2. 创建数组副本：用扩展运算符...把原数组复制一份，避免修改原state
3. 交换元素位置：通过解构赋值交换当前元素和前一个元素的位置
4. 更新state：把新数组传给setItems完成状态更新

完整的indexMove函数代码如下：

const [items, setItems] = useState([]);

const indexMove = (item, index) => {
  // 索引为0时直接返回，不处理
  if (index === 0) return;

  // 创建原数组的副本，避免修改原state
  const newItems = [...items];
  
  // 交换当前元素和前一个元素的位置
  [newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]];
  
  // 更新状态
  setItems(newItems);
};

额外说明 #

• 为什么要创建数组副本？因为React依赖state的引用变化来触发组件重渲染，直接修改原数组的话，数组的引用没变，React会认为state没更新，就不会重新渲染列表。
• 如果担心索引越界（比如数组为空或者传入的index不合法），还可以加一层判断：if (index <= 0 || index >= items.length) return;，这样逻辑会更稳妥。

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