React中如何为新创建的item对象分配数组索引以实现元素移动

不需要额外工具给对象分配索引，也不建议把索引存在item对象内部，因为数组顺序变更、元素删除都会导致已存的索引失效，维护成本很高。

步骤1：修复索引undefined问题 #

数组的map方法原生支持第二个参数，就是当前遍历元素的实时索引，直接用这个值传给Item组件即可，不需要在item对象里存储：

const itemList = items
// 新增map的第二个参数index获取实时索引
.map((item, index) => (
  <Item
    id={item.id}
    index={index} // 直接传实时计算的索引
    name={item.name}
    key={item.id}
    deleteItem={deleteItem}
    moveLeft={moveLeft}
    moveRight={moveRight} // 后续加右移方法也要传
  />
));

这样moveLeft里拿到的index就不会是undefined了。

步骤2：实现元素左右移动逻辑 #

移动逻辑直接通过索引操作数组即可，注意不要直接修改原state，要拷贝后再更新：

// 左移方法
function moveLeft(index) {
  // 第一个元素无法左移，直接返回
  if (index === 0) return;
  const updatedItems = [...items];
  // 交换当前元素和前一位元素的位置
  [updatedItems[index], updatedItems[index - 1]] = [updatedItems[index - 1], updatedItems[index]];
  setItems(updatedItems);
}

// 右移方法
function moveRight(index) {
  // 最后一个元素无法右移，直接返回
  if (index === items.length - 1) return;
  const updatedItems = [...items];
  // 交换当前元素和后一位元素的位置
  [updatedItems[index], updatedItems[index + 1]] = [updatedItems[index + 1], updatedItems[index]];
  setItems(updatedItems);
}

步骤3：给Item组件补全右移事件绑定 #

修改Item组件里的右箭头点击事件：

<i className="arrow right icon" onClick={() => props.moveRight(props.index)} style={{ color: 'blue'}}></i>

补充：如果确实需要把索引存在item对象里的方案 #

如果你的业务场景必须要在item内部存储索引，addItem的时候直接取当前数组的长度作为新增元素的索引即可：

function addItem(name) {
  const newItem = { 
    id: "item-" + nanoid(), 
    name: name, 
    index: items.length // 新增元素默认追加到末尾，索引等于当前数组长度
  };
  setItems([...items, newItem]);
}

注意：该方案存在维护成本，删除元素、移动元素后都需要遍历更新所有元素的index字段，否则会出现索引和实际位置不一致的问题，非必要不推荐使用。

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