React表格行点击Update按钮后条件渲染失效问题排查

核心问题1：状态与按钮ID的类型不匹配 #

你的changeElementsOnUpdate状态初始值是数字-1，但按钮的id属性是字符串类型（比如"0"）。当你执行changeElementsOnUpdate === 0的判断时，字符串与数字的严格相等比较会返回false，导致UI无法切换到编辑模式。

解决方法：
将按钮ID转换为数字后再更新状态，或者直接使用数组索引（数字类型）来标记编辑行：

// 直接使用索引替代e.target.id
onClick={() => {
  setChangeElementsOnUpdate(index);
}}

// 或者如果坚持用e.target.id，转换为数字
onClick={(e) => {
  setChangeElementsOnUpdate(Number(e.target.id));
}}

核心问题2：硬编码渲染单一行 #

你当前代码中使用users[0]硬编码渲染第一行数据，无法遍历整个users数组展示所有记录。

解决方法：
使用map方法遍历users数组，为每个用户生成一行：

{users.map((userRow, index) => (
  <tr key={userRow.prn}> {/* 优先使用用户唯一标识作为key，如prn */}
    <td>{userRow.prn}</td>
    <td>{userRow.name}</td>
    <td>{userRow.gender}</td>
    
    <td>
      {changeElementsOnUpdate === index ? (
        <select 
          name="dept" 
          value={user.dept} 
          onChange={onInputChange}
        >
          <option value="">--Select--</option>
          <option value="CSE">CSE</option>
          <option value="MECH">MECH</option>
          <option value="ENTC">ENTC</option>
          <option value="Civil">Civil</option>
        </select>
      ) : userRow.dept}
    </td>
    
    <td>
      {changeElementsOnUpdate === index ? (
        <input 
          type="button" 
          value="Done"
          onClick={(e) => onUpdateSubmit(e, index)}
        />
      ) : (
        <input 
          type="button" 
          value="Update"
          onClick={() => {
            // 点击Update时，将当前行数据同步到user状态
            setUser(userRow);
            setChangeElementsOnUpdate(index);
          }}
        />
      )}
    </td>
  </tr>
))}

核心问题3：编辑模式下拉框初始值错误 #

进入编辑模式时，下拉框需要默认选中当前行的部门。如果user状态未同步当前行数据，下拉框会显示错误的初始值。

解决方法：
点击Update按钮时，将当前行的用户数据同步到user状态：

onClick={() => {
  setUser(userRow);
  setChangeElementsOnUpdate(index);
}}

补充：提交更新的逻辑优化 #

在onUpdateSubmit函数中，需要根据索引更新users数组中对应行的数据：

const onUpdateSubmit = (e, index) => {
  e.preventDefault();
  const updatedUsers = [...users];
  updatedUsers[index] = { ...updatedUsers[index], dept: user.dept };
  setUsers(updatedUsers);
  setChangeElementsOnUpdate(-1); // 退出编辑模式
};

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