レコードごとに一意のキーを取得する方法を見つけようとしています。
これまでのところ、私のコードは次のようになっています。
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
必要であるというエラーがまだ発生しています。
これを達成するための最良の方法は何でしょうか?
こんにちは@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」プロパティとして設定され、警告が表示されなくなったことがわかります。
各列には一意の
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;
一意の値を持つテーブルに
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;
@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' />
私のためにそれを修正しました、ありがとう
最も参考になるコメント
@ahmetkuslularエラーメッセージは非常に明確です。データセットにはキープロパティを持つアイテムが含まれている必要があります。または、データセット内の各行に固有のフィールドの名前を使用して、テーブルコンポーネントのrowKeyプロパティを指定する必要があります。
ソースコードはこちら