react里已经添加了不重复的key值为什么还有警告？

Question

import React from 'react'import Item from './Item.jsx'class ItemPanel extends React.Component{constructor(){    super();}render(){    var items = [];        if(this.props.items.length == 0){        items.push(<div>NO Record!</div>)    }else{        this.props.items.forEach((v,i) => {                        items.push(<Item key={i} item={v}/>);                    })    }    return (        <div>            <div className='itemsPanel-top'>                <span key="s1">name</span>                <span key="s2">ID</span>                <span key="s3">Six</span>                <span key="s4">Age</span>                <span key="s5">DEL</span>                <span key="s6">DETA</span>            </div>            <ul className='itemsPanel-con'>                {items}            </ul>        </div>    )}}export default ItemPanel

Answer 1

<ul className='itemsPanel-con'>

    {items}

</ul>

items是一个数组，渲染的时候都需要带上key，只有一项内容也需要：

items.push(<div key={1}>NO Record!</div>)