React中点击下移按钮移动数组元素后未触发重渲染的问题

原因分析 #

核心问题是直接修改了原数组的引用：array_move函数里用splice操作原数组，这是可变操作，修改后返回的还是原来的数组对象。React的useState只有当传入的新值和旧值引用不同时，才会触发组件重渲染。你调用setArr时传的是同一个数组引用，所以React认为状态没变化，不会重新渲染组件。

解决方法 #

要避免直接修改原状态数组，必须创建新的数组副本再操作，以下是两种可行方案：

方案一：修改array_move函数，先拷贝原数组 #

const array_move = (arr, old_index, new_index) => {
  // 先创建原数组的浅拷贝，避免修改原状态数组
  const newArr = [...arr];
  if (new_index >= newArr.length) {
    var k = new_index - newArr.length + 1;
    while (k--) {
      newArr.push(undefined);
    }
  }
  newArr.splice(new_index, 0, newArr.splice(old_index, 1)[0]);
  return newArr;
};

方案二：调用array_move时先拷贝数组 #

const down = () => {
  // 先拷贝原数组，再传入函数操作
  setArr(array_move([...arr], 1, 2));
};

额外优化建议 #

当前代码用数组索引作为key，虽然能运行，但如果数组元素顺序频繁变化，可能导致React列表渲染的优化逻辑失效。建议用元素自身的唯一值作为key（比如这里的item本身就是唯一的）：

<li key={item} className="list-none">
  <p>{item}</p>
</li>

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