使用React Data Grid时点击单个复选框全选所有行的问题解决

在使用React Data Grid时，会遇到点击单个复选框却选中所有行的问题，核心原因是选中状态的初始化和更新逻辑错误，修正方案如下：

关键修正点 #

• selected状态必须初始化为空数组([])，不能使用布尔值(false)
• onSelectionChange函数需要将selected状态设置为选中行ID的数组

修正后的完整代码 #

import React, { useState, useCallback } from "react";
import ReactDataGrid from "@inovua/reactdatagrid-enterprise";
import "@inovua/reactdatagrid-enterprise/index.css";
import Button from "@inovua/reactdatagrid-community/packages/Button";
import data from "../Components/data.json";
import axios from "axios";

// CheckBox Mapping
const toArray = (selected, dataMap) => {                                      
  const keysObj = selected === true ? dataMap : selected;
  return Object.keys(keysObj).map((key) => Number(key));
};

const handleClick = (value) => {
  window.location.href = `https://app.socialveins.com/account/${value}`;
};

// COLUMNS 
const columns = [
  {
    name: "photo",
    header: "Photo",
    defaultWidth: 110,
    render: ({ value }) => (
      <img
        style={{ borderRadius: "25px", marginTop: "5px", marginLeft: "27px" }}
        src={value}
        width={35}
        height={35}
      />
    ),
  },
  { name: "name", header: "User Name", defaultFlex: 1 },
  { name: "location", header: "Location" },
  { name: "follower", header: "Followers", defaultFlex: 1 },
  { name: "likes", header: "Avg. Likes", defaultFlex: 1 },
  { name: "rate", header: "Eng. Rate", defaultFlex: 1 },
  { name: "reach", header: "Reach per Thous.", defaultFlex: 1 },
  { name: "category", header: "Category", defaultFlex: 1 },
  {
    name: "profile",
    header: "Profile",
    defaultFlex: 1,
    render: ({ value }) => {
      return (
        <span>
          <Button style={{marginLeft: "18px"}} onClick={() => handleClick(value)}>View Profile</Button>
        </span>
      );
    },
  },
];

const gridStyle = { minHeight: 657 };

const DataTable = () => {
  const [selected, setSelected] = useState([]);
  const [gridDate, setGridData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState(true);

  const onSelectionChange = useCallback(({ selected }) => {
    setSelected(selected);
  }, []);

// DATA LOAD
  const loadData = async () => {
    setLoading(true);
    const response = await axios.get({ data });
    setGridData(response.data);
    setLoading(false);
  };

  return (
    <div>
      <ReactDataGrid
        checkboxColumn
        columns={columns}
        pagination
        dataSource={data}
        onSelectionChange={onSelectionChange}
        selected={selected}
        style={gridStyle}
      />
    </div>
  );
};

export default DataTable;

再次强调核心规则：

• selected状态必须初始化为空数组([])，不能用布尔值(false)
• onSelectionChange函数需将selected状态设置为选中行ID的数组

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