Каждая запись в таблице должна иметь уникальный ключ `key` или установить для rowKey уникальный первичный ключ

Question

Каждая запись в таблице должна иметь уникальный ключ `key` или установить для rowKey уникальный первичный ключ

Я рендеринг таблицы с Ant Design, и она отлично работает, но в консоли есть предупреждение:

Каждая запись в таблице должна иметь уникальный key опора или комплект rowKey на уникальный первичный ключ

Мой код выглядит следующим образом:

import React, { Component } from 'react';
import {  Table} from 'antd';
import { adalApiFetch } from '../../adalConfig';


class ListTenants extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }



    fetchData = () => {
        adalApiFetch(fetch, "/Tenant", {})
          .then(response => response.json())
          .then(responseJson => {
            if (!this.isCancelled) {
                const results= responseJson.map(row => ({
                    ClientId: row.ClientId,
                    ClientSecret: row.ClientSecret,
                    Id: row.Id,
                    SiteCollectionTestUrl: row.SiteCollectionTestUrl,
                    TenantDomainUrl: row.TenantDomainUrl
                  }))
              this.setState({ data: results });
            }
          })
          .catch(error => {
            console.error(error);
          });
      };


    componentDidMount(){
        this.fetchData();
    }

    render() {
        const columns = [
                {
                    title: 'Client Id',
                    dataIndex: 'ClientId',
                    key: 'ClientId'
                }, 
                {
                    title: 'Site Collection TestUrl',
                    dataIndex: 'SiteCollectionTestUrl',
                    key: 'SiteCollectionTestUrl',
                },
                {
                    title: 'Tenant DomainUrl',
                    dataIndex: 'TenantDomainUrl',
                    key: 'TenantDomainUrl',
                }
        ];



        return (
            <Table columns={columns} dataSource={this.state.data} />
        );
    }
}

export default ListTenants;

40

reactjs antd

Источник

user1014217 06 авг '18 в 08:04

12 ответов

Решение

Просто добавьте уникальное значение ключа в ссылку тега:

   <Table
   columns={columns}
   dataSource={this.state.data} 
   rowKey="Id" />  // unique key

Надеюсь это поможет

53

Источник

user10147161 06 авг '18 в 08:21

Уникальный ключ / rowKey таблицы React

Каждая запись в таблице должна иметь уникальный key prop или set rowKey к уникальному первичному ключу.

решение 1

каждый столбец имеет уникальный key

// each column with unique key

import React from 'react';

import {
  Table,
} from 'antd';

const leftTableColumns = [
  {
    title: 'Page / Modal',
    dataIndex: 'pageModal',
    key: 'pageModal',
  },
  {
    title: 'Success Rate',
    dataIndex: 'successRate',
    key: 'successRate',
  },
];

const LeftTable = (props) => {
  const {
    leftTableDatas,
  } = props;
  return (
    <>
      <Table
        columns={leftTableColumns}
        dataSource={leftTableDatas}
      />
    </>
  );
};

export {
  LeftTable,
};

export default LeftTable;

решение 2

только нужно установить rowkey на таблице с уникальным значением

// table with rowkey

import React from 'react';

import {
  Table,
} from 'antd';

const leftTableColumns = [
  {
    title: 'Page / Modal',
    dataIndex: 'pageModal',
  },
  {
    title: 'Success Rate',
    dataIndex: 'successRate',
  },
];

const LeftTable = (props) => {
  const {
    leftTableDatas,
  } = props;
  return (
    <>
      <Table
        // shorthand rowKey
        rowkey="id"
        // rowKey={obj => obj.id}
        columns={leftTableColumns}
        dataSource={leftTableDatas}
      />
    </>
  );
};

export {
  LeftTable,
};

export default LeftTable;

ссылка

https://ant.design/components/table/

образ

18

Источник

user5934465 12 дек '19 в 07:37

Только вам нужно установить rowkey в таблице с уникальным значением.


 <Table
  dataSource={[finance]}
  columns={columns}
  rowKey={record => record.id}
 />

6

Источник

user13472197 11 май '20 в 09:17

Поскольку вы не добавляете ключ в массив dataSource, добавьте также ключ.

Как это:

const results= responseJson.map(row => ({

    key: row.ClientId,     // here

    ClientId: row.ClientId,
    ClientSecret: row.ClientSecret,
    Id: row.Id,
    SiteCollectionTestUrl: row.SiteCollectionTestUrl,
    TenantDomainUrl: row.TenantDomainUrl
}))

Или вы можете использовать любое уникальное значение массива dataSource в качестве ключа, используя свойство rowKey, как это:

<Table
   columns={columns}
   dataSource={this.state.data}

   rowKey="Id" />     // any unique value

Ссылка на документ.

4

Источник

user5185595 06 авг '18 в 08:12

У меня была твоя проблема, и этот метод ответил

      <Table 
  columns={columns} 
  dataSource={data} 
  rowKey="name" 
/>

3

Источник

28 июл '21 в 20:03

Для меня сработало это решение

rowKey="{record => record.id}"

или rowKey="id"

но в вашей коллекции должен существовать столбец id

3

Источник

user7396942 17 июн '20 в 06:25

У меня такая же проблема, но она решена. Надеюсь на эту помощь :) просто добавьте rowKey='id' Я использую rowKey='id', потому что 'id' - это уникальные данные в переменной dataSource, но вы можете использовать другое уникальное значение из переменной dataSource. (с уникальным значением)

      import React from 'react'
import { Table } from 'antd' 

const committeInformation = () => {

 const columns = [
  {
    key: '0',
    title: 'id',
    dataIndex: 'id',
  },
  {
    key: '1',
    title: 'name',
    dataIndex: 'name',
  },
  {
   key: '2',
   title: 'email',
   dataIndex: 'email'
  }
 ]

 const dataSource = [
   {
     id: '1',
     name: 'user 1',
     email: 'coco@gmail.com',
     
   },
   {
     id: '2',
     name: 'user 2',
     email: 'coco@gmail.com'
    }
  ]

  return (
    <Table
     rowKey='id' //this from variable dataSource
     columns={columns}
     dataSource={dataSource}
    />
  )
}

 export default committeInformation

2

Источник

user16381360 07 окт '21 в 04:10

Быстрый взлом

Я назначаю случайные математические числа, измененные на строку для каждого ключа.?

Это значит, что мои колонки становятся

      const columns = [
            {
                title: 'Client Id',
                dataIndex: 'ClientId',
                key: () => Math.random().toString(),
            }, 
            {
                title: 'Site Collection TestUrl',
                dataIndex: 'SiteCollectionTestUrl',
                key: () => Math.random().toString(),
            },
            {
                title: 'Tenant DomainUrl',
                dataIndex: 'TenantDomainUrl',
                key: () => Math.random().toString(),
            }
    ];

Надеюсь, это поможет всем, кто приезжает из будущего ..........

1

Источник

user11945373 20 май '21 в 17:54

Если ваши данные не имеют логического ключа и вам нужен ключ только для целей представления, вы можете перехватить данные и записать ключ, используя случайное число.

      export const Table = ({
  data,
}: {
  data: ITableData[] | undefined;
}) => {

 ....

 if (data) {
data.map((record) => {
  return (record.id = Math.floor(Math.random() * 1000000));
});

а затем назначьте rowkey таблице

      <Table dataSource={data} rowKey="id">

0

Источник

user1613158 12 авг '22 в 03:16

Это решение специфично для «antd»

Если ошибка говорит:
Проверьте метод рендерингаBody:

Вы можете установитьrowKeyуникальная ценность. Он может принимать как строку, так и функцию, возвращающую уникальное значение.

        <Table
     columns={columns}
     dataSource={[]}
     rowKey="id"
    />

Если ошибка говорит:
Проверьте метод рендерингаCell:

Это может означать, что вы отображаете список значений в одной из CELLS. Вы можете добавитьkeyк каждому пункту списка и решите проблему!

0

Источник

user8763998 06 авг '23 в 14:51

в Вью 3:

      <a-table
    ...
    :columns="yourColumns"
    :data-source="yourData"
    // the solution:
    :row-key="record => record.id"
    // or
    :rowKey="record => record.id"
  >

0

Источник

ValeronS 09 ноя '22 в 10:57

Другие вопросы по тегам reactjs antd

user9136233 06 авг '18 в 08:12 2018-08-06 08:12 · Accepted Answer · 2018-08-06 08:12

React визуализирует списки, используя ключевую опору. Это работает так, потому что реакция позволяет уменьшить сложность алгоритмов сравнения и уменьшить количество мутаций DOM. Вы можете прочитать немного больше в документации по согласованию ответов: https://reactjs.org/docs/reconciliation.html

В вашем случае вы добавили ключи к столбцам, но не для строк. Добавьте ключевое поле в источник данных. Таким образом, ваш код может быть следующим:

import React, { Component } from 'react';
import {  Table} from 'antd';
import { adalApiFetch } from '../../adalConfig';


class ListTenants extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }



    fetchData = () => {
        adalApiFetch(fetch, "/Tenant", {})
          .then(response => response.json())
          .then(responseJson => {
            if (!this.isCancelled) {
                const results= responseJson.map(row => ({
                    key: row.id, // I added this line
                    ClientId: row.ClientId,
                    ClientSecret: row.ClientSecret,
                    Id: row.Id,
                    SiteCollectionTestUrl: row.SiteCollectionTestUrl,
                    TenantDomainUrl: row.TenantDomainUrl
                  }))
              this.setState({ data: results });
            }
          })
          .catch(error => {
            console.error(error);
          });
      };


    componentDidMount(){
        this.fetchData();
    }

    render() {
        const columns = [
                {
                    title: 'Client Id',
                    dataIndex: 'ClientId',
                    key: 'ClientId'
                }, 
                {
                    title: 'Site Collection TestUrl',
                    dataIndex: 'SiteCollectionTestUrl',
                    key: 'SiteCollectionTestUrl',
                },
                {
                    title: 'Tenant DomainUrl',
                    dataIndex: 'TenantDomainUrl',
                    key: 'TenantDomainUrl',
                }
        ];



        return (
            <Table columns={columns} dataSource={this.state.data} />
        );
    }
}

export default ListTenants;