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'>&nbsp; &nbsp; {items}</ul>items是一个数组，渲染的时候都需要带上key，只有一项内容也需要：items.push(<div key={1}>NO Record!</div>)