react,housedetail里的浏览器报错Each child in a list should have a unique "key" prop?

在使用的react版本如下:

img


已写的部分代码:

// ...
export default class HouseDetail extends Component {
// ...
// 渲染轮播图结构
  renderSwipers() {
    const {
      houseInfo: { houseImg }
    } = this.state

        return houseImg.map(item => 
      (<Swiper.Item>
        <a  key={item} href="https://www.baidu.com">
          <img src={BASE_URL + item} alt="" />
        a>
      Swiper.Item>
    ))
  }
// ...
// 渲染标签
  renderTags() {
    const {
      houseInfo: { tags }
    } = this.state

    return tags.map((item, index) => {
      let tagClass = ''
      if (index > 2) {
        tagClass = 'tag3'
      } else {
        tagClass = 'tag' + (index + 1)
      }

      return (
        <span key={item} className={[styles.tag, styles[tagClass]].join(' ')}>
          {item}
        span>
      )
    })
  }
// ...
items}> {recommendHouses.map(item => ( <HouseItem {...item} key={item.id} /> ))}
// ...

chrome浏览器报错:

img


代码里的每一个key都是唯一的,请问为何仍报错说需要唯一的key?请问如何解决?望能对现有代码进行举例说明。

key={item} 加到 swiper-item 标签上呢