React TSX中删除数组元素后UI渲染索引错误问题排查

问题根源 #

1. 使用数组索引作为key：React依赖key识别虚拟DOM元素的唯一性。删除数组中间元素后，剩余元素的索引会重新排序，React会错误复用原有组件——比如原索引1的组件会被用来渲染新数组中索引1的元素，但该组件的defaultValue仅在首次渲染时生效，不会同步更新内容，最终导致UI看起来像是删除了最后一项。
2. Input使用defaultValue而非受控绑定：defaultValue只在组件初始化时赋值，后续状态变化不会更新输入框内容，进一步加剧了显示异常。

解决步骤 #

1. 为闪卡项添加唯一标识

修改闪卡数据结构，给每个项添加唯一id（可用自增数字、UUID等），示例初始数据：

const initialFlashcards = [
  { id: 1, front: '卡1正面', back: '卡1背面' },
  { id: 2, front: '卡2正面', back: '卡2背面' },
  { id: 3, front: '卡3正面', back: '卡3背面' },
  { id: 4, front: '卡4正面', back: '卡4背面' },
];
const [flashcardsState, setFlashcardsState] = useState(initialFlashcards);

2. 基于唯一ID修改状态处理函数

避免依赖索引操作数据，改用id定位目标项：

// 删除闪卡
const handleDeleteClick = (cardId: number) => {
  const updatedFlashcards = flashcardsState.filter(card => card.id !== cardId);
  setFlashcardsState(updatedFlashcards);
};

// 更新闪卡内容
const handleCardChange = (cardId: number, field: 'front' | 'back', newValue: string) => {
  const updatedFlashcards = flashcardsState.map(card => 
    card.id === cardId ? { ...card, [field]: newValue } : card
  );
  setFlashcardsState(updatedFlashcards);
};

3. 重构渲染函数

使用受控输入框（绑定value），并以闪卡的id作为key：

const renderEdit = () => {
  return (
    <div className="card-container">
      <div className="inputcardstext">
        <h4>Front</h4>
        <h4>Back</h4>
      </div>
      {flashcardsState.map(card => (
        <div key={card.id}>
          <div className="inputcards">
            <input
              type="text"
              className='front-back'
              value={card.front}
              onChange={(e) => handleCardChange(card.id, 'front', e.target.value)}
            />
            <input
              type="text"
              className='front-back'
              value={card.back}
              onChange={(e) => handleCardChange(card.id, 'back', e.target.value)}
            />
            <button onClick={() => handleDeleteClick(card.id)}>删除</button>
          </div>
        </div>
      ))}
    </div>
  );
};

备选方案（不修改数据结构）

若无法调整原数据结构，可使用闪卡内容的唯一组合作为key（仅适用于内容无重复的场景），同时将input改为受控绑定：

{flashcardsState.map((card) => (
  <div key={`${card[0]}-${card[1]}`}>
    <div className="inputcards">
      <input
        type="text"
        className='front-back'
        value={card[0]}
        onChange={(e) => handleCardChange(index, 0, e.target.value)}
      />
      <input
        type="text"
        className='front-back'
        value={card[1]}
        onChange={(e) => handleCardChange(index, 1, e.target.value)}
      />
      <button onClick={() => handleDeleteClick(index)}>删除</button>
    </div>
  </div>
))}

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