如何使用React Hooks在map循环中获取被编辑项的id以发起PUT请求

问题分析 #

你当前所有行的输入框共用同一个newName状态，无法区分不同行的输入内容，也没有绑定对应行的部门ID，所以拿不到要更新的条目ID。以下是两种可直接落地的解决方案：

方案1：事件回调直接传参（多编辑场景适用） #

直接在遍历的时候把当前条目的ID传入事件回调，同时用对象存储不同ID对应的输入内容，避免多个输入框内容互相干扰：

修改状态定义 #

const [departments, setDepartments] = useState([])
// 用对象存储不同部门ID对应的输入内容，key为部门ID，value为输入的新名称
const [newNameMap, setNewNameMap] = useState({})

修改渲染逻辑 #

{
  departments.map((department) => {
    const currentId = department.departmentId
    return (
      <tr id={currentId}>
        <td>{department.name}</td>
        <td>{currentId}</td>
        <td>
          <input 
            type="text" 
            value={newNameMap[currentId] || ''}
            onChange={e => setNewNameMap({
              ...newNameMap,
              [currentId]: e.target.value
            })} 
          /> 
          <button 
            className="table-btn btn" 
            onClick={() => handleChange(currentId, newNameMap[currentId])}
          >
            Save
          </button>
        </td>
      </tr>
    )
  })
}

修改保存逻辑 #

const handleChange = async (departmentId, newName) => {
  // 直接用传入的departmentId发起PUT请求即可
  await fetch(`你的接口地址/${departmentId}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: newName })
  })
  // 请求成功后更新本地列表，刷新视图
  setDepartments(prev => prev.map(item => 
    item.departmentId === departmentId ? {...item, name: newName} : item
  ))
  // 可选：清空当前输入框内容
  setNewNameMap(prev => {
    const newMap = {...prev}
    delete newMap[departmentId]
    return newMap
  })
}

方案2：维护全局编辑ID（单编辑场景适用） #

如果同一时间只能编辑一个条目，可以直接在输入时把当前条目的ID存入你已经定义的id状态：

{
  departments.map((department) => {
    return (
      <tr id={department.departmentId}>
        <td>{department.name}</td>
        <td>{department.departmentId}</td>
        <td>
          <input 
            type="text" 
            onChange={e => {
              setNewName(e.target.value)
              setId(department.departmentId)
            }} 
          /> 
          <button 
            className="table-btn btn" 
            onClick={() => handleChange(id, newName)}
          >
            Save
          </button>
        </td>
      </tr>
    )
  })
}

注意：该方案如果同时编辑多个条目，后输入的内容会覆盖之前的ID和名称，仅适合单条编辑的场景。

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