Next.js中点击按钮移动选中对象数组元素异常问题求助

问题根源 #

核心问题在于依赖数组索引（index）跟踪选中状态和渲染列表项：当数组元素发生增删或顺序变化时，索引会动态改变，导致React无法正确识别组件实例，进而引发多选状态混乱、选中项与实际元素不匹配的异常。此外，索引依赖的状态修改逻辑在复杂场景下更容易出现隐性的状态不同步问题。

具体修复步骤 #

1. 改用唯一ID跟踪选中状态，替换索引依赖 #

将原来通过index切换选中状态的逻辑，改为通过元素的唯一标识（ser.id）定位修改，彻底摆脱索引依赖：

// 修改风险列表的选中状态处理
const handleRiskSummary = (itemId: string) => {
  setRiskSummary(prevItems => 
    prevItems.map(item => 
      item.ser.id === itemId 
        ? { ...item, isChecked: !item.isChecked } 
        : item
    )
  );
};

// 修改中立列表的选中状态处理
const handleNeutralSummary = (itemId: string) => {
  setNeutralSummary(prevItems => 
    prevItems.map(item => 
      item.ser.id === itemId 
        ? { ...item, isChecked: !item.isChecked } 
        : item
    )
  );
};

2. 更新List组件的渲染与事件传递 #

确保List组件内部渲染时：

• 给每个列表项设置稳定的唯一key（用item.ser.id，禁止使用index）
• 传递item.ser.id给onChange事件，而非index

假设你的List组件内部渲染逻辑如下，需要对应调整：

// List组件内部的项渲染示例（请根据实际组件修改）
{listItems.map(item => (
  <div 
    key={item.ser.id} // 关键：使用唯一ID作为key
    onClick={() => onChange(item.ser.id)} // 传递ID而非index
    className="list-item"
  >
    <input 
      type="checkbox" 
      checked={item.isChecked} 
      onChange={(e) => e.stopPropagation()} // 避免点击文本时触发两次事件
    />
    <span>{item.ser.text}</span>
  </div>
))}

调用List组件的代码保持不变，但事件逻辑已改为基于ID：

<List
  listItems={neutralSummary}
  listTitle="中立まとめ"
  onChange={handleNeutralSummary}
/>
<List
  listItems={riskSummary}
  listTitle="リスクまとめ"
  onChange={handleRiskSummary}
/>

3. 优化元素移动逻辑（可选） #

原移动逻辑功能正常，但可以改为函数式更新，确保状态更新基于最新的状态快照，避免并发更新时的潜在问题：

const handleArrowLineRightClick = () => {
  // 先移除中立列表中选中的项
  setNeutralSummary(prev => prev.filter(item => !item.isChecked));
  // 将选中项添加到风险列表（生成新ID并重置选中状态）
  setRiskSummary(prev => [
    ...prev,
    ...neutralSummary
      .filter(item => item.isChecked)
      .map(item => ({
        ...item,
        ser: { ...item.ser, id: uuidv4() },
        isChecked: false
      }))
  ]);
};

const handleArrowLineLeftClick = () => {
  setRiskSummary(prev => prev.filter(item => !item.isChecked));
  setNeutralSummary(prev => [
    ...prev,
    ...riskSummary
      .filter(item => item.isChecked)
      .map(item => ({
        ...item,
        ser: { ...item.ser, id: uuidv4() },
        isChecked: false
      }))
  ]);
};

修复原理 #

1. 稳定的key值：React通过key识别组件唯一性，使用固定的ser.id而非动态变化的index，确保组件状态始终关联正确的元素。
2. ID驱动的状态修改：不依赖数组顺序和索引，直接通过唯一ID定位元素，避免索引失效导致的选中状态错误。
3. 函数式状态更新：确保每次状态更新都基于最新的状态快照，避免异步状态更新引发的数据不一致。

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