Ant-design: テーブル内の各レコードには、一意の `key`プロパティが必要です。または、` rowKey`を一意の主キーに設定する必要があります。

作成日 2017年09月15日  ·  16コメント  ·  ソース: ant-design/ant-design

レコードごとに一意のキーを取得する方法を見つけようとしています。

これまでのところ、私のコードは次のようになっています。

let lastIndex = 0
const updateIndex = () => {
  lastIndex++
  return lastIndex
}

...

constructor() {
  super()

  this.state = {
    columns: [ {
      title: 'Nombre',
      dataIndex: 'name',
      key: `name${updateIndex()}`
    }, {
      title: 'Precio',
      dataIndex: 'price',
      key: `price${updateIndex()}`
    }, {
      title: 'Precio regular',
      dataIndex: 'regularPrice',
      key: `regularPrice${updateIndex()}`
    }, {
      title: 'Categoría(s)',
      key: `id${updateIndex()}`,
      render: (text, record) => (
        <span>
          {
            record.categories.map((r, index) => (
              <span key={index}>
                {
                  index > 0 &&
                  <span className="ant-divider"/>
                }
                <span>{r.name}</span>
              </span>
            ))
          }
        </span>
      )
    }, {
      title: 'Action',
      key: `id${updateIndex()}`,
      render: (text, record) => (
        <span>
          <a href="#">Editar - {record.name}</a>
          <span className="ant-divider"/>
          <a href="#" style={{color: 'red'}}>Borrar</a>
        </span>
      )
    }, ]
  }
}

しかし、テーブル内の各レコードに一意のkey必要であるというエラーがまだ発生しています。

これを達成するための最良の方法は何でしょうか?

Invalid

最も参考になるコメント

@ahmetkuslularエラーメッセージは非常に明確です。データセットにはキープロパティを持つアイテムが含まれている必要があります。または、データセット内の各行に固有のフィールドの名前を使用して、テーブルコンポーネントのrowKeyプロパティを指定する必要があります。

ソースコードはこちら

<Table 
  columns={columns} 
  dataSource={this.props.categories} 
  rowKey="name" 
/>

全てのコメント16件

こんにちは@johhansantana 、あなたの問題は私たちの問題の要件に準拠していないため、クローズされました。 Issue Helperを使用して

これは、列ではなく、データのキーを意味します。

私は同じ問題を抱えています。 どうすればこれを解決できますか? @ ant-design-bot @ afc163

dataIndexプロパティが設定されていない場合の列では、列キーに一意のキーを設定する必要があります。

@johhansantanaキーは一意ではありません↓

タイトル: 'Categoría(s)'、
キー: `id $ {updateIndex()}`、
..。
タイトル: 'アクション'、
キー: `id $ {updateIndex()}`、

私は私たちがしなければならないことを完全には理解していませんでした。 @lijinlone

@ahmetkuslularエラーメッセージは非常に明確です。データセットにはキープロパティを持つアイテムが含まれている必要があります。または、データセット内の各行に固有のフィールドの名前を使用して、テーブルコンポーネントのrowKeyプロパティを指定する必要があります。

ソースコードはこちら

<Table 
  columns={columns} 
  dataSource={this.props.categories} 
  rowKey="name" 
/>

COLUMNキーとROWキーを混同していたので、これも私を混乱させました。 このエラーは、列構成の「キー」とは関係ありません。

Antは、次のように、データの各行に「key」という名前の一意のキーがあることを期待しています。

{ key: 1, value: 'foo'}

私のデータには代わりに「id」がありました:

{ id: 1, value: 'foo'}

これを解決するために、次のようにrowKeyプロパティをテーブルに追加しました。

<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

<Table .... rowKey={record => record.countryId} ... />は私のためにそれを修正しました。
countryIdは、データの各アイテムフィールドの一意の値です。

Ant-designテーブルでは、rowKeypropsタイプは文字列です。
そこで、uuidを使用して文字列として追加しました。 だから私はエラーを解決しました。

やあみんな、テーブルにrowKeyを追加して私の問題を解決しました
<Table rowKey = "id" ..... />

'id'は、テーブル内の列の1つのキーです-
const columns = [
{{
題名: '#'、
dataIndex:data.id、
キー: 'id'、
}、
{{
タイトル: '名前'、
dataIndex: '名前'、
キー: '名前'、
}、


ええ、私のIDも一意の文字列です。 この変更により、列のIDが各列の「data-row-key」プロパティとして設定され、警告が表示されなくなったことがわかります。

解決策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;


ref

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

image

@xgqfrms 、ソリューション2では、 rowKeyプロップをrowkey="id"短縮できます。 それは同じように機能します。

私が得ているのはこのメッセージです

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TableRow`. See https://fb.me/react-warning-keys for more information.
    in TableCell (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)

TableCellに問題があることを示していますが、 keyプロップをそこに設定するにはどうすればよいですか?

Antdページの例がこのエラーをスローしていないことに気づきました。

手伝ってくれてありがとう。

私が得ているのはこのメッセージです

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TableRow`. See https://fb.me/react-warning-keys for more information.
    in TableCell (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)

ねえ、私はちょうどそれを理解しました。 columns小道具では、 dataIndexまたはkeyいずれかが必要です。

このセクションで言及されています: https

@tuanalumi 、指摘してくれてありがとう、 keyを追加しましたが、警告は表示されなくなりました。

COLUMNキーとROWキーを混同していたので、これも私を混乱させました。 このエラーは、列構成の「キー」とは関係ありません。

Antは、次のように、データの各行に「key」という名前の一意のキーがあることを期待しています。

{ key: 1, value: 'foo'}

私のデータには代わりに「id」がありました:

{ id: 1, value: 'foo'}

これを解決するために、次のようにrowKeyプロパティをテーブルに追加しました。

<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

私のためにそれを修正しました、ありがとう

このページは役に立ちましたか?
0 / 5 - 0 評価