Ant-design: يجب أن يحتوي كل سجل في الجدول على خاصية "key" الفريدة ، أو تعيين "rowKey" على مفتاح أساسي فريد.

تم إنشاؤها على ١٥ سبتمبر ٢٠١٧ · 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

مصدر

johhansantana

👍2

التعليق الأكثر فائدة

ahmetkuslular رسالة الخطأ صريحة جدًا يجب أن تحتوي مجموعة البيانات الخاصة بك على عناصر بها خاصية مفتاح عليها أو يجب عليك تحديد خاصية rowKey في مكون الجدول بالاسم من حقل في مجموعة البيانات الخاصة بك والذي يكون فريدًا لكل صف.

كود المصدر هنا

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

buvinghausen في ٨ يناير ٢٠١٨

👍143 🎉31 ❤26 😄21 🚀14

ال 16 كومينتر

مرحبًا johhansantana ، تم إغلاق مشكلتك لأنها لا تتوافق مع متطلبات الإصدار لدينا. الرجاء استخدام " مساعد المشكلات" لإنشاء مشكلة ، شكرًا لك!

ant-design-bot في ١٥ سبتمبر ٢٠١٧

هذا يعني مفتاح البيانات الخاصة بك ، وليس الأعمدة.

afc163 في ١٥ سبتمبر ٢٠١٧

👍8

لدي نفس المشكلة. كيف يمكننا حل هذا؟ Almajlliss يارب

ahmetkuslular في ٢ ديسمبر ٢٠١٧

مع الأعمدة إذا لم يتم تعيين خاصية dataIndex ، يجب تعيين مفتاح العمود على مفتاح فريد.

johhansantana مفتاح ليس فريدًا ↓

العنوان: "Categoría (s)"،
المفتاح: `id $ {updateIndex ()}` ،
...
العنوان: "Action"،
المفتاح: `id $ {updateIndex ()}` ،

funnyleolee في ١٥ ديسمبر ٢٠١٧

👍1

لم أفهم تمامًا ما يتعين علينا القيام به. تضمين التغريدة

ahmetkuslular في ٢ يناير ٢٠١٨

كود المصدر هنا

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

buvinghausen في ٨ يناير ٢٠١٨

👍143 🎉31 ❤26 😄21 🚀14

كان هذا الأمر محيرًا بالنسبة لي أيضًا ، لأنني كنت أخلط بين مفاتيح COLUMN ومفاتيح ROW. هذا الخطأ لا علاقة له "بالمفتاح" في تكوين العمود الخاص بك.

تتوقع Ant أن يكون لديك مفتاح فريد يسمى على وجه التحديد "مفتاح" في كل صف من البيانات ، مثل:

{ key: 1, value: 'foo'}

كانت بياناتي تحتوي على "معرف" بدلاً من ذلك:

{ id: 1, value: 'foo'}

لحل هذه المشكلة ، أضفت خاصية rowKey إلى الجدول الخاص بي كما يلي:

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

jdhiro في ٩ يوليو ٢٠١٨

👍63 ❤17 🎉5 😄5 👀2

<Table .... rowKey={record => record.countryId} ... /> أصلحه لي.
countryId يمثل قيمًا فريدة في كل حقل عنصر في بياناتك.

joshpitzalis في ٢٦ نوفمبر ٢٠١٨

❤12 👍9

في جدول Ant-design ، نوع الدعائم rowKey هو سلسلة.
لذلك أضفتها كسلسلة باستخدام uuid. لذلك قمت بحل الخطأ.

autumnblue في ١٦ أبريل ٢٠١٩

مرحبًا يا رفاق ، أدت إضافة rowKey إلى Table إلى حل مشكلتي
<Table rowKey = "id" ..... />

و "id" هو مفتاح أحد الأعمدة الموجودة داخل الجدول -
أعمدة ثابتة = [
{
لقب: '#'،
dataIndex: data.id،
المفتاح: "id" ،
} ،
{
اسم العنوان'،
فهرس البيانات: "الاسم" ،
المفتاح: "الاسم" ،
} ،
.
.
نعم وهويتي هي سلسلة فريدة أيضًا. من خلال هذا التغيير ، يمكنني أن أرى الأعمدة تحتوي على معرف تم تعيينه كخاصية "مفتاح صف البيانات" لكل عمود ولا يوجد تحذير الآن.

storesbuzz في ٢٤ سبتمبر ٢٠١٩

👍1

الحل 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/

xgqfrms في ٢٢ أكتوبر ٢٠١٩

😄5 🚀4 🎉4

xgqfrms ، في الحل 2 ، يمكنك تقصير rowKey إلى rowkey="id" . يعمل نفس الشيء.

keithort في ٢٢ أكتوبر ٢٠١٩

👎1 👍1

ما أحصل عليه هو هذه الرسالة

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 لا توضح هذا الخطأ.

شكرا للمساعدة.

kfrajtak في ١١ ديسمبر ٢٠١٩

👍2

ما أحصل عليه هو هذه الرسالة

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 prop ، يجب أن يكون لديك إما dataIndex أو key .

مذكور في هذا القسم: https://ant.design/components/table/#Column

tuanalumi في ١٧ ديسمبر ٢٠١٩

👍4

tuanalumi ، شكرًا للإشارة إلى ذلك ، لقد أضفت key ولم أعد أتلقى هذا التحذير!

kfrajtak في ١٧ ديسمبر ٢٠١٩

كان هذا الأمر محيرًا بالنسبة لي أيضًا ، لأنني كنت أخلط بين مفاتيح COLUMN ومفاتيح ROW. هذا الخطأ لا علاقة له "بالمفتاح" في تكوين العمود الخاص بك.
تتوقع Ant أن يكون لديك مفتاح فريد يسمى على وجه التحديد "مفتاح" في كل صف من البيانات ، مثل:
{ key: 1, value: 'foo'}
كانت بياناتي تحتوي على "معرف" بدلاً من ذلك:
{ id: 1, value: 'foo'}
لحل هذه المشكلة ، أضفت خاصية rowKey إلى الجدول الخاص بي كما يلي:
<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

أصلحه لي ، شكرا