react array or iterator should have a unique "key" prop?大家帮忙看看

Question

为了实现每三个为一组图片,外层包上DIV标签。
写了一个工具函数filterArray把原数组，分割成2个数组，map遍历时key和item（每项内容）不渲染，但console.log可以出来。
系统报错Each child in an array or iterator should have a unique "key" prop.
求指点迷津，谢谢🙏

import React, { Component } from 'react';
import TactiveItem from '../../tactiveitem/views';
import './index.css';

//过滤每三个为一组
let filterArray = (source, count) => {
let arr = [];
for(let i=0,len=source.length;i<len;i+=3){

   arr.push(source.slice(i,i+3));

}
return arr;
}

class TactiveList extends Component {

constructor(props) {

super(props);

this.state = {
    title: '当季热门目的地',
    listData: [
        {
            id:   '1',
            pic:  'p29/201302/28/3d20251a1b60350a93835fbb',
            tag:  '错峰低价',
            text: '日本',
            fav:  '8251',
            istag: true
        },
        {
            id:   '2',
            pic:  'p70/1809/e7/4941057a6aae702',
            text: '丽江',
            fav:  '5775'
        },
        {
            id:   '3',
            pic:  'p60/1809/f4/d19e9608d2d1a002',
            text: '三亚',
            fav:  '8355'
        },
        {
            id:   '4',
            pic:  'p48/201302/28/bc44faa497db0dcf93835fbb',
            text: '泰国',
            fav:  '8436'
        },
        {
            id:   '5',
            pic:  'p49/201302/28/f7876853b1e2279d93835fbb',
            text: '巴厘岛',
            fav:  '5568'
        },
        {
            id:   '6',
            pic:  'p5/1411/67/677f3ca100291a23213a9cdb',
            text: '欧洲',
            fav:  '8436'
        }
    ],
    filterItems: []
};

}

render() {

let listData = this.state.listData;                 //原数组
this.state.filterItems = filterArray(listData, 3);  //过滤后数组
/*
**item:[
        {"id":"1","pic":"p29/201302/28/3d20251a1b60350a93835fbb","tag":"错峰低价","text":"日本","fav":"8251","istag":true},
        {"id":"2","pic":"p70/1809/e7/4941057a6aae702","text":"丽江","fav":"5775"},
        {"id":"3","pic":"p60/1809/f4/d19e9608d2d1a002","text":"三亚","fav":"8355"}
    ]
**item:[
        {"id":"4","pic":"p48/201302/28/bc44faa497db0dcf93835fbb","text":"泰国","fav":"8436"},
        {"id":"5","pic":"p49/201302/28/f7876853b1e2279d93835fbb","text":"巴厘岛","fav":"5568"},
        {"id":"6","pic":"p5/1411/67/677f3ca100291a23213a9cdb","text":"欧洲","fav":"8436"}
    ]
**
*/
return (
  <div className="m-dest m-dest-default">
    <h5 className="title">{this.state.title}</h5>
    <div className="list">
        {
            this.state.filterItems.map((item) => {
                //报错Each child in an array or iterator should have a unique "key" prop.
                return <div><TactiveItem key={item.id} itemData={item} /></div>        
            })

        }
    </div>
  </div>
);

}
}

export default TactiveList;

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

最后自己解决的，json格式是多维数组，遍历2次map，成功了。

Answer 2

this.state.filterItems.map((item, index) => {
                //报错Each child in an array or iterator should have a unique "key" prop.
                return <div key={index}><TactiveItem itemData={item} /></div>        
            })

key 的位置改一下

Answer 3

this.state.filterItems.map(item => {
    //报错Each child in an array or iterator should have a unique "key" prop.
    return <TactiveItem key={item.id} itemData={item} />       
})

去掉外层div

Answer 4

this.state.filterItems.map((item, index) => {
                //报错Each child in an array or iterator should have a unique "key" prop.
                return <div key={index}><TactiveItem  itemData={item} /></div>        
            })