React+Tailwind表单更新异常：选中项更新触发全条目变更

我正在基于React和Tailwind CSS开发项目，项目中包含一个表单。点击「Save」按钮后，表单数据会展示在div中；点击该div时，会弹出模态框用于更新数据。但我发现更新某一条目时，所有条目都会被修改。请问该问题的成因是什么，如何修复？

相关代码 #

export default function LaborantModal() {
  // Relevant context and state declarations...

  function handleSubmit(e) {
    e.preventDefault();
    const laborantEvent = {
      name,
      surname,
      inputValue,
    };

    if (selectedEvent) {
      dispatchCalEvent({ type: 'update', payload: laborantEvent });
    } else {
      dispatchCalEvent({ type: 'push', payload: laborantEvent });
    }

    setShowLaborantModal(false);
  }

function savedEventsReducer(state, {type, payload}){
  switch (type) {
      case 'push':
          return[...state, payload];
      case'update':
          return state.map(evt => evt.id === payload.id ? payload : evt)
      case 'delete':    
          return state.filter(evt => evt.id !== payload.id)
      default:
          throw new Error();
  }
}

 <div className='mb-1'>
        <AddLaborantButton/>
        <div 
          className='py-5'
          onClick={()=>{
                setShowLaborantModal(true)
              }}>
                {savedEvents.map((evt, idx) => (
                <div
                key={idx}
                onClick={()=> setSelectedEvent(evt)}
                className={ 'bg-purple-400 p-1 mr-3 py-2 text-white text-sm rounded mb-5 truncate'}>
                    {evt.name}
                </div>
            ))}
          </div>
        </div>

• 新增条目无唯一ID，更新匹配失效：push操作生成的laborantEvent没有id属性，更新逻辑依赖evt.id === payload.id匹配条目，所有条目id均为undefined，导致更新时全部被替换。
• 事件冒泡与表单初始化缺失：外层div的点击事件会触发模态框，条目点击事件未阻止冒泡，且打开模态框时未将选中条目的数据填充到表单，加重状态混乱。
• 索引作为key的隐患：用数组索引做key，数组元素变化时React可能错误复用组件，虽不是直接原因，但会引发其他状态异常。

1. 给新增条目添加唯一ID #

在handleSubmit中，为新增条目生成唯一id，更新时保留原条目id确保匹配精准：

function handleSubmit(e) {
  e.preventDefault();
  // 用原生方法生成唯一ID，也可替换为Date.now()
  const laborantEvent = {
    id: selectedEvent?.id || crypto.randomUUID(),
    name,
    surname,
    inputValue,
  };

  if (selectedEvent) {
    dispatchCalEvent({ type: 'update', payload: laborantEvent });
  } else {
    dispatchCalEvent({ type: 'push', payload: laborantEvent });
  }

  setShowLaborantModal(false);
}

2. 修复事件冒泡并优化模态框触发逻辑 #

移除外层div的点击事件，让每个条目独立处理选中和模态框打开逻辑，同时阻止事件冒泡：

<div className='mb-1'>
  <AddLaborantButton/>
  <div className='py-5'>
    {savedEvents.map((evt) => (
      <div
        key={evt.id} // 改用唯一ID作为key
        onClick={(e) => {
          e.stopPropagation(); // 阻止事件冒泡
          // 打开模态框前同步选中条目数据到表单状态
          setName(evt.name);
          setSurname(evt.surname);
          setInputValue(evt.inputValue);
          setSelectedEvent(evt);
          setShowLaborantModal(true);
        }}
        className='bg-purple-400 p-1 mr-3 py-2 text-white text-sm rounded mb-5 truncate'>
        {evt.name}
      </div>
    ))}
  </div>
</div>

3. 确保表单状态正确初始化 #

打开模态框时必须将选中条目的数据同步到name、surname、inputValue状态，保证更新时针对选中条目修改。

4. 替换key为唯一ID #

将原来的key={idx}改为key={evt.id}，让React准确识别每个列表项，避免组件复用导致的状态混乱。

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