React中不修改原数组实现数组元素交换的swapLeft函数不生效如何解决？

问题根源 #

你当前的实现存在两个核心问题：

1. 生成交换后的新数组后，没有调用setItems更新状态，React检测不到状态变化自然不会触发页面重渲染，所以看起来没有任何效果。
2. 没有做边界判断，当点击第一项的左移按钮时，index - 1会得到-1，访问数组下标为-1的元素会报错。

修正后的swapLeft函数 #

function swapLeft(index) {
  // 边界判断：第一项无法左移，直接返回
  if (index <= 0) return
  const index2 = index - 1;
  const newItems = items.slice();
  // 交换两个位置的元素
  [newItems[index], newItems[index2]] = [newItems[index2], newItems[index]];
  // 调用setItems更新状态，触发重渲染
  setItems(newItems);
}

补充说明 #

• React中只有通过useState返回的setter函数修改状态，才会触发组件重渲染，直接修改原数组或者生成新数组不更新状态都不会生效。
• 后续你要实现右移功能的话，逻辑同理，边界判断改成if (index >= items.length - 1) return即可。

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