Ant Design Table - 列表中的每个孩子都应该有一个唯一的“键”道具答案

【问题标题】：Ant Design Table - Each child in a list should have a unique "key" propAnt Design Table - 列表中的每个孩子都应该有一个唯一的“键”道具
【发布时间】：2023-02-21 16:34:57
【问题描述】：

我使用 React Redux 和 SignalR 实现了一个实时数据网格表。在将第一项添加到表/第一次调度发生后，将记录以下控制台错误：

警告：列表中的每个孩子都应该有一个独特的“关键”道具。查看Body的render方法。有关详细信息，请参阅https://reactjs.org/link/warning-keys。

我了解问题所在，但我该如何解决？

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Table } from "antd";
import { HubConnectionState } from "redux-signalr";
import hubConnection from "../store/middlewares/signalr/signalrSlice";
import { Stock, addStock } from "../store/reducers/stockSlice";
import { RootState } from "../store";

const DataGrid = () => {
  const dispatch = useDispatch();
  const stocks = useSelector((state: RootState) => state.stock.stocks);

  useEffect(() => {
    if (hubConnection.state !== HubConnectionState.Connected) {
      hubConnection
        .start()
        .then(() => {
          console.log("Started connection via SignalR");

          hubConnection.stream("GetStockTickerStream").subscribe({
            next: async (item: Stock) => {
              console.log(item);
              dispatch(addStock(item)); // Dispatch addStock action to update Redux store
            },
            complete: () => {
              console.log("Completed");
            },
            error: (err) => {
              console.error(err);
            },
          });
        })
        .catch((err) => console.error(`Faulted: ${err.toString()}`));
    }
  }, [dispatch]);

  return (
    <Table dataSource={stocks}>
      <Table.Column title="Symbol" dataIndex="symbol" key="symbol" />
      <Table.Column title="Price" dataIndex="price" key="price" />
    </Table>
  );
};

export default DataGrid;

【问题讨论】：

标签： reactjs typescript antd

【解决方案1】：

我想问题不是列的关键，而是行的关键。你能展示你的数据源的结构吗？在 antd 文档中，数据源应该是这样的：

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

确保每一行都有自己的键。

【讨论】：

【解决方案2】：

数据中预计有关键属性

const stocks = [
  {
    key: '1',
    title: 'John Brown',
    symbol: 'x,
  },
  {
    key: '2',
    title: 'John Brown',
    symbol: 'x,
  },
] 

return (
    <Table dataSource={stocks}>
      <Table.Column title="Symbol" dataIndex="symbol" key="symbol" />
      <Table.Column title="Price" dataIndex="price" key="price" />
    </Table>
  );

或者你可以传递rowKeyfunction(record): string类型的道具

希望能帮助到你

【讨论】：