web-dev-qa-db-ja.com

テーブル内の各レコードには、一意の「キー」プロパティを設定するか、「rowKey」を一意の主キーに設定する必要があります

私はアリのデザインでテーブルをレンダリングしていますが、うまく動作しますが、コンソールに警告があります：

テーブルの各レコードには、一意の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;
reactjsantd
7
Luis Valencia

Reactは、キープロップを使用してリストをレンダリングします。 reactは、diffingアルゴリズムの複雑さを軽減し、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;
4
Nik

タグリンクに一意のキー値を追加するだけです：

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

この助けを願っています

3
Jhon

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
}))

または、次のようにプロパティrowKeyを使用して、dataSource配列の一意の値をキーとして使用できます。

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

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

ドキュメントリファレンス

1
Mayank Shukla