Ant-design: तालिका में प्रत्येक रिकॉर्ड में एक अद्वितीय 'कुंजी' प्रोप होना चाहिए, या 'पंक्तिकी' को एक अद्वितीय प्राथमिक कुंजी पर सेट करना चाहिए।

को निर्मित 15 सित॰ 2017 · 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 8 जन॰ 2018

👍143 🎉31 ❤26 😄21 🚀14

सभी 16 टिप्पणियाँ

नमस्ते @johhansantana , आपका मुद्दा बंद कर दिया गया है क्योंकि यह हमारे मुद्दे की आवश्यकताओं के अनुरूप नहीं है। कृपया समस्या उत्पन्न करने के लिए

ant-design-bot 15 सित॰ 2017

इसका मतलब है कि आपके डेटा की कुंजी, कॉलम नहीं।

afc163 15 सित॰ 2017

👍8

मेरी भी यही समस्या है। हम इसे कैसे हल कर सकते हैं? @ ant- डिजाइन-बॉट

ahmetkuslular 2 दिस॰ 2017

कॉलम के साथ यदि डेटा इंडेक्स संपत्ति सेट नहीं है, तो कॉलम कुंजी को अद्वितीय कुंजी सेट की जानी चाहिए।

@johhansantana कुंजी अद्वितीय नहीं है

शीर्षक: 'श्रेणी (ओं)',
कुंजी: `आईडी $ {अपडेट इंडेक्स ()}`,
...
शीर्षक: 'एक्शन',
कुंजी: `आईडी $ {अपडेट इंडेक्स ()}`,

funnyleolee 15 दिस॰ 2017

👍1

मुझे पूरी तरह से समझ नहीं आया कि हमें क्या करना है। @लिजिनलोन

ahmetkuslular 2 जन॰ 2018

स्रोत कोड यहाँ

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

buvinghausen 8 जन॰ 2018

👍143 🎉31 ❤26 😄21 🚀14

यह मुझे भी भ्रमित कर रहा था, क्योंकि मैं ROW कुंजियों के साथ COLUMN कुंजियों को भ्रमित कर रहा था। इस त्रुटि का आपके कॉलम कॉन्फ़िगरेशन में "कुंजी" से कोई लेना-देना नहीं है।

चींटी उम्मीद कर रही है कि आपके पास डेटा की प्रत्येक पंक्ति पर विशेष रूप से "कुंजी" नाम की एक अनूठी कुंजी होगी, जैसे:

{ key: 1, value: 'foo'}

मेरे डेटा के बजाय "आईडी" था:

{ id: 1, value: 'foo'}

इसे हल करने के लिए, मैंने अपनी तालिका में एक पंक्ति की संपत्ति को इस प्रकार जोड़ा:

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

jdhiro 9 जुल॰ 2018

👍63 ❤17 🎉5 😄5 👀2

<Table .... rowKey={record => record.countryId} ... /> इसे मेरे लिए ठीक कर दिया।
countryId आपके डेटा में प्रत्येक आइटम फ़ील्ड पर एक अद्वितीय मान होने के नाते।

joshpitzalis 26 नव॰ 2018

❤12 👍9

चींटी-डिज़ाइन तालिका में, RowKey प्रोप प्रकार स्ट्रिंग है।
इसलिए मैंने इसे uuid का उपयोग करके स्ट्रिंग के रूप में जोड़ा। इसलिए मैंने त्रुटि का समाधान किया।

autumnblue 16 अप्रैल 2019

अरे दोस्तों, तालिका में पंक्ति जोड़ने से मेरी समस्या हल हो गई
<Table पंक्तिकी = "आईडी" ...../>

और 'आईडी' तालिका के अंदर के कॉलम में से एक की कुंजी है -
कास्ट कॉलम = [
{
शीर्षक: '#',
डेटा इंडेक्स: data.id,
कुंजी: 'आईडी',
},
{
शीर्षक नाम',
डेटा इंडेक्स: 'नाम',
कुंजी: 'नाम',
},
.
.
हाँ और मेरी आईडी भी एक अनूठी स्ट्रिंग है। इस परिवर्तन से, मैं देख सकता हूं कि कॉलम में प्रत्येक कॉलम के लिए 'डेटा-पंक्ति-कुंजी' संपत्ति के रूप में एक आईडी सेट है और अब कोई चेतावनी नहीं है।

storesbuzz 24 सित॰ 2019

👍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 22 अक्तू॰ 2019

😄5 🚀4 🎉4

@xgqfrms , समाधान 2 में, आप rowKey प्रोप को छोटा कर सकते हैं rowkey="id" । यह वही काम करता है।

keithort 22 अक्तू॰ 2019

👎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 प्रोप कैसे सेट कर सकता हूं?

मैंने देखा है कि एंटडी पेज पर उदाहरण इस त्रुटि को नहीं फेंक रहे हैं।

मदद के लिए धन्यवाद।

kfrajtak 11 दिस॰ 2019

👍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 प्रोप में, आपके पास dataIndex या key ।

इस खंड में इसका उल्लेख है: https://ant.design/components/table/#Column

tuanalumi 17 दिस॰ 2019

👍4

@tuanalumi , key जोड़ा है और मुझे अब वह चेतावनी नहीं मिल रही है!

kfrajtak 17 दिस॰ 2019

यह मुझे भी भ्रमित कर रहा था, क्योंकि मैं ROW कुंजियों के साथ COLUMN कुंजियों को भ्रमित कर रहा था। इस त्रुटि का आपके कॉलम कॉन्फ़िगरेशन में "कुंजी" से कोई लेना-देना नहीं है।
चींटी उम्मीद कर रही है कि आपके पास डेटा की प्रत्येक पंक्ति पर विशेष रूप से "कुंजी" नाम की एक अनूठी कुंजी होगी, जैसे:
{ key: 1, value: 'foo'}
मेरे डेटा के बजाय "आईडी" था:
{ id: 1, value: 'foo'}
इसे हल करने के लिए, मैंने अपनी तालिका में एक पंक्ति की संपत्ति को इस प्रकार जोड़ा:
<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

इसे मेरे लिए तय किया, धन्यवाद

amermemic 14 मई 2020

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

सबसे उपयोगी टिप्पणी

सभी 16 टिप्पणियाँ

समाधान 1

समाधान 2

संदर्भ

संबंधित मुद्दों