使用defaultChecked/checked时表格排序复选框异常，该如何修复？

这个问题的核心在于受控组件与非受控组件的区别，以及React列表渲染时的key值管理，咱们一步步拆解解决：

问题原因拆解 #

• 用defaultChecked时：这是非受控组件模式，复选框的状态由DOM自身维护，初始值仅在第一次渲染时生效。当表格排序后，虽然行的顺序变了，但每个复选框的DOM状态不会跟着新的item.hasItem更新，所以看起来位置没变化。
• 用checked时：这是受控组件模式，复选框的状态完全由React状态控制，但如果只给checked赋值却不处理onChange事件，用户点击复选框时无法更新状态，导致复选框看起来"失效"。

修复方案：使用受控组件+状态绑定唯一标识 #

我们需要把复选框改成受控组件，同时用每个项的**唯一标识（比如id）**来绑定选中状态，确保排序时状态能和对应的项正确关联。

具体步骤 #

1. 维护选中状态的state：用一个对象存储每个项的选中状态，键为项的唯一id，值为布尔值。
2. 绑定onChange事件：点击复选框时，更新对应的状态值。
3. 给列表项设置唯一key：用项的id作为key，让React在排序时能准确识别每个行的身份，避免复用错误的组件状态。
4. 受控渲染复选框：根据state中的值来设置checked属性，而不是直接用item.hasItem。

修改后的代码示例 #

import React, { useState } from 'react';

const Table = () => {
  // 初始数据，确保每个item有唯一id
  const [items, setItems] = useState([
    { id: 1, name: "Item 1", hasItem: true },
    { id: 2, name: "Item 2", hasItem: false },
    { id: 3, name: "Item 3", hasItem: true }
  ]);
  
  // 用id作为key维护选中状态，初始化时同步初始值
  const [checkedStates, setCheckedStates] = useState(
    items.reduce((acc, item) => {
      acc[item.id] = item.hasItem;
      return acc;
    }, {})
  );

  // 排序函数，不修改原数组，返回新的排序后数组
  const sortByName = () => {
    const sorted = [...items].sort((a, b) => a.name.localeCompare(b.name));
    setItems(sorted);
  };

  // 复选框状态更新逻辑，根据id切换对应状态
  const handleCheckboxChange = (id) => {
    setCheckedStates(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  return (
    <div>
      <button onClick={sortByName}>按名称排序</button>
      <table>
        <thead>
          <tr>
            <th>选择</th>
            <th>名称</th>
          </tr>
        </thead>
        <tbody>
          {items.map(item => (
            <tr key={item.id}> {/* 必须设置唯一key，确保React正确识别行 */}
              <td>
                <input
                  type="checkbox"
                  checked={checkedStates[item.id]} // 从状态中取对应id的选中值
                  onChange={() => handleCheckboxChange(item.id)} // 绑定状态更新事件
                />
              </td>
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

为什么这样能解决问题？ #

• 用id绑定状态：不管表格怎么排序，每个复选框的状态都和项的唯一id关联，不会因为行顺序变化而错位。
• 受控组件模式：checked状态由React状态完全控制，点击复选框时通过onChange更新状态，确保复选框能正常响应交互。
• 唯一key：让React在列表重新渲染时，能正确匹配每个行对应的组件和状态，避免出现状态混乱。

内容的提问来源于stack exchange，提问作者S.Sakanyan