React Table行选择：根据included字段默认选中及onChange不触发问题

两个异常的共同核心原因 #

你在IndeterminateCheckbox组件上的属性书写顺序错误：自定义的checked、onChange属性写在了{...row.getToggleRowSelectedProps()}之前，后者内置返回的checked、onChange属性会直接覆盖你自定义的配置，导致两个问题同时出现。
另外useRowSelect插件默认使用内部独立的选中状态，不会自动读取数据的included字段，需要额外配置同步逻辑。

分步修复方案 #

1. 配置React Table初始选中状态，同步included字段 #

在useTable的配置项中手动指定初始选中值，将数据的included字段同步到插件内部状态：

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  footerGroups,
  rows,
  prepareRow,
  selectedFlatRows
} = useTable(
  {
    columns,
    data,
    // 新增配置开始
    getRowId: (row) => row.sourceId, // 用数据唯一标识作为行id，状态同步更稳定
    initialState: {
      selectedRowIds: data.reduce((acc, cur) => {
        if (cur.included) acc[cur.sourceId] = true
        return acc
      }, {})
    },
    autoResetSelectedRows: false // 避免数据重渲染时意外重置选中状态
    // 新增配置结束
  },
  useRowSelect,
  (hooks) => {
    // 原有逻辑保持不变
  }
);

2. 修正复选框属性顺序，修复onChange不触发问题 #

调整Cell返回的IndeterminateCheckbox属性顺序，先展开内置属性，再写自定义配置避免覆盖，同时修正onChange的参数错误：

Cell: ({ row }) => (
  <div>
    <IndeterminateCheckbox
      name={row.original.sourceId}
      {...row.getToggleRowSelectedProps()} // 先展开内置属性，避免被覆盖
      onChange={(e) => {
        console.log(row.original)
        // 如果需要双向同步原数据的included字段，可在此处添加对应更新逻辑
      }}
    />
  </div>
)

这里不需要再手动绑定checked={row.original.included}，因为我们已经将included字段同步到了React Table内部的选中状态，插件会自动处理选中状态的更新。

3. 可选：双向同步原数据的included字段 #

如果需要修改选中状态时同步更新原数据的included值，可在onChange中添加对应逻辑，调用父组件传入的更新方法修改数据源即可。

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