ANTD rowSelection 不会检入 UI答案

【问题标题】：ANTD rowSelection won't check in the UIANTD rowSelection 不会检入 UI
【发布时间】：2021-05-09 13:19:59
【问题描述】：

我正在尝试创建一个具有选择能力的表。我可以在控制台中显示一个选择，但它不再选中该框。我是如何失去 UI 能力的？

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const App = ({ data, ...props }) => {
  const spreadArguments = (...args) => console.log(args);
  const rowSelection = {
    selectedRowKeys: [],
    onSelect: spreadArguments,
    onChange: spreadArguments
  };

  const columns = [
    {
      title: "Name",
      dataIndex: "name"
    },
    {
      title: "Age",
      dataIndex: "age"
    },
    {
      title: "Address",
      dataIndex: "address"
    }
  ];

  return (
    <>
      <Table dataSource={data} columns={columns} rowSelection={rowSelection} />
    </>
  );
};

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}

ReactDOM.render(<App data={data} />, document.getElementById("container"));

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

UI 没有更新的原因是在rowSelection 中你总是传递selectedRowKeys: [] 一个空数组。所以状态永远不会更新。

试试下面的 sn-p：

import React from "react";
import ReactDOM from "react-dom";

import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const App = ({ data, ...props }) => {
  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);

  const spreadArguments = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
    console.log(selectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onSelect: spreadArguments,
    onChange: spreadArguments
  };

  const columns = [
    {
      title: "Name",
      dataIndex: "name"
    },
    {
      title: "Age",
      dataIndex: "age"
    },
    {
      title: "Address",
      dataIndex: "address"
    }
  ];

  return (
    <Table dataSource={data} columns={columns} rowSelection={rowSelection} />
  );
};

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}

ReactDOM.render(<App data={data} />, document.getElementById("container"));

【讨论】：

【解决方案2】：

您示例中的原因是您没有在App 中传递data。

如果你在 App 函数中创建这个数组，你可以使用它

const App = ({ ...props }) => {
  const spreadArguments = (...args) => console.log(args);
  const rowSelection = {
    selectedRowKeys: [],
    onSelect: spreadArguments,
    onChange: spreadArguments
  };

  const data = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`
    });
  }


  const columns = [
    {
      title: "Name",
      dataIndex: "name"
    },
    {
      title: "Age",
      dataIndex: "age"
    },
    {
      title: "Address",
      dataIndex: "address"
    }
  ];

  return (
    <>
      <Table dataSource={data} columns={columns} rowSelection={rowSelection} />
    </>
  );
};


ReactDOM.render(<App data={data} />, document.getElementById("container"));

您也可以保留示例中的几乎所有内容，从 `App props 中删除 data

const App = ({ ...props }) => {

我想数据可能会从父组件作为道具传递。如果是父组件，应该这样使用App：

const Parent = () => {
    const data = [];
    for (let i = 0; i < 46; i++) {
        data.push({
          key: i,
          name: `Edward King ${i}`,
          age: 32,
          address: `London, Park Lane no. ${i}`
        });
    }

    return(
      <App data={data}/>
    )
}

【讨论】：