错误：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我正在研究React-Map-GL，而且我还很新。我已将此代码添加到我的react-app中，但出现了这样的错误：

它使用：“ eslint-config-airbnb”

提前谢谢

  

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

    import React from 'react'
    import { Collapse, Descriptions } from 'antd'
    import styles from './style.module.scss'

    import data from '../data.json'

    const { Panel } = Collapse

    function callback(key) {
      console.log(key)
    }

    class InboxPacks extends React.Component {
      state = {
        inboxPackages: data.inboxPackages,
      }

      render() {
        const { inboxPackages } = this.state
        return (
          <div>
            <Collapse bordered={false} onChange={callback} className={styles.inbox}>
              {inboxPackages.map((item, index) => (
                <Panel
                  key={index.toString()}
                  header={[<span>{item.name}</span>, <small>{item.received}</small>]}
                  extra={[
                    <span>{item.weight} lb</span>,
                    <small>
                      {item.dimensions} {`in`}
                    </small>,
                  ]}
                >
                  <Descriptions layout="vertical" className={styles.descriptionsPanel}>
                    <Descriptions.Item label="Courier" className={styles.volkan}>
                      {item.courier}
                    </Descriptions.Item>
                    <Descriptions.Item label="Tracking Number">{item.tracking}</Descriptions.Item>
                    <Descriptions.Item label="Storage Left">{item.storageLeft}</Descriptions.Item>
                    <Descriptions.Item label="Customs Value">{`$${item.customsValue}`}</Descriptions.Item>
                    <Descriptions.Item label="Content">{item.content}</Descriptions.Item>
                  </Descriptions>
                </Panel>
              ))}
            </Collapse>
          </div>
        )
      }
    }

    export default InboxPacks

Answer 1

这与header和extra道具有关-如您所见，它们是数组，请尝试向数组中的每个元素添加key属性。

尝试一下：

import React from 'react'
import { Collapse, Descriptions } from 'antd'
import styles from './style.module.scss'

import data from '../data.json'

const { Panel } = Collapse

function callback(key) {
  console.log(key)
}

class InboxPacks extends React.Component {
  state = {
    inboxPackages: data.inboxPackages,
  }

  render() {
    const { inboxPackages } = this.state
    return (
        <div>
          <Collapse bordered={false} onChange={callback} className={styles.inbox}>
            {inboxPackages.map((item, index) => (
                <Panel
                    key={`panel_${index}`}
                    header={[<span key={`header_span_${index}`}>{item.name}</span>, <small key={`header_small_${index}`}>{item.received}</small>]}
                    extra={[
                      <span key={`extra_span_${index}`}>{item.weight} lb</span>,
                      <small key={`extra_small_${index}`}>
                        {item.dimensions} {`in`}
                      </small>,
                    ]}
                >
                  <Descriptions layout="vertical" className={styles.descriptionsPanel}>
                    <Descriptions.Item label="Courier" className={styles.volkan}>
                      {item.courier}
                    </Descriptions.Item>
                    <Descriptions.Item label="Tracking Number">{item.tracking}</Descriptions.Item>
                    <Descriptions.Item label="Storage Left">{item.storageLeft}</Descriptions.Item>
                    <Descriptions.Item label="Customs Value">{`$${item.customsValue}`}</Descriptions.Item>
                    <Descriptions.Item label="Content">{item.content}</Descriptions.Item>
                  </Descriptions>
                </Panel>
            ))}
          </Collapse>
        </div>
    )
  }
}

export default InboxPacks