[英]Error: Each child in a list should have a unique “key” prop
我正在研究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
這是關系到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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.