react-data-table-component中selectableRowSelected与onSelectedRowsChange冲突致无限重渲染

核心问题 #

1. 事件处理函数参数错误：handleSelectedRowsChange里错误调用rows.setSelectedRows，react-data-table-component的onSelectedRowsChange回调接收的是包含selectedRows（选中行数组）的对象，错误赋值会导致状态异常触发重渲染。
2. 默认选中逻辑与状态冲突：selectableRowSelected是静态判断函数，和onSelectedRowsChange同时使用时，组件会在每次渲染时重新计算选中行，状态更新又触发渲染，形成无限循环。

修复步骤 #

1. 修正事件处理函数 #

正确获取选中行数据并更新状态：

const handleSelectedRowsChange = ({ selectedRows }) => {
  setSelectedRows(selectedRows);
};

2. 把默认选中逻辑整合到状态初始化 #

移除selectableRowSelected，在useState初始化时筛选默认选中行：

const [selectedRows, setSelectedRows] = useState(data.filter(row => row.id > 2));

3. 给DataTable传入selectedRows属性 #

将状态同步给组件，确保选中状态一致：

<DataTable
  // 其他属性保持不变
  onSelectedRowsChange={handleSelectedRowsChange}
  selectedRows={selectedRows} // 新增该行
/>

完整修复后的代码 #

import React, { useState } from "react";
import DataTable from "react-data-table-component";

const SampleDataTable = () => {
  const data = [
    { id: 1, name: "John Doe", age: 28, profession: "Engineer" },
    { id: 2, name: "Jane Smith", age: 32, profession: "Designer" },
    { id: 3, name: "Bob Johnson", age: 45, profession: "Manager" }
  ];

  const columns = [
    { name: "ID", selector: "id", sortable: true },
    { name: "Name", selector: "name", sortable: true },
    { name: "Age", selector: "age", sortable: true },
    { name: "Profession", selector: "profession", sortable: true }
  ];

  const [selectedRows, setSelectedRows] = useState(data.filter(row => row.id > 2));

  const handleSelectedRowsChange = ({ selectedRows }) => {
    setSelectedRows(selectedRows);
  };

  console.log(selectedRows);

  return (
    <div>
      <h2>Sample Data Table</h2>
      <DataTable
        columns={columns}
        data={data}
        selectableRows={true}
        selectableRowsHighlight
        pagination 
        highlightOnHover 
        striped 
        dense 
        onSelectedRowsChange={handleSelectedRowsChange}
        selectedRows={selectedRows}
      />
    </div>
  );
};

export default SampleDataTable;

原理说明 #

通过useState管理选中状态，初始化时设置默认选中行，再通过selectedRows属性同步给组件，onSelectedRowsChange仅负责更新状态，形成单向数据流，彻底消除静态判断和状态更新的循环冲突。

内容的提问来源于stack exchange，提问作者Nghĩa Phạm