“对象作为React子级无效(已找到:具有键{}的对象)。”

Question

class Home extends PureComponent {
    render() {
        const { proList } = this.props;   
        return (
            <HomeWrap>
                <Banner />
                <Profile />
                <div className="projectWrap">
                    <div className="hotRecommended">
                        {
                            this.hotRecommendList(proList)
                        }
                    </div>      
                </div>
            </HomeWrap>
        )
    }
    hotRecommendList(list) {
        let hotTarget = list.filter(item => item.tag === 'hot');
        return hotTarget.map((target, index) => {
            return (
                <Project key={index} /> 
            )
        })   
    }
}

错误是:未捕获错误:对象作为React子对象无效(found: object with key {})。如果您打算呈现一个子级集合，请改用数组。

如下所示获取json文件proList：

[
  {
    "id": 1,
    "img": "https://gw.alicdn.com/tfs/TB1wx_RQFXXXXbGXFXXXXXXXXXX-250-125.png_200x200q85s150.jpg_.webp",
    "desc": "英国证券交易所,国家：英国, 适合人群：本科毕业生 专科毕业生,时间：2019.01.08-2019.02.08",
    "tag": "hot"
  },
  {
    "id": 2,
    "img": "https://gw.alicdn.com/tfs/TB1wx_RQFXXXXbGXFXXXXXXXXXX-250-125.png_200x200q85s150.jpg_.webp",
    "desc": "美国白宫,国家：美国, 适合人群：美籍华人 老外, 时间：2019.01.08-2019.02.08",
    "tag": "quality"
  }
]

Answer 1

现在我想我知道了，Project组件获得了一个对象，但呈现错误，最终project组件如下所示：

class Project extends PureComponent {
    constructor(props) {
        super(props);
        console.log('projcet component props', props);

    }

    render() {
        let { target }  = this.props;
        console.log('target', target);

        return (
            <ProjectWrap>
                <div>{target.desc}</div>
            </ProjectWrap>
        )
    }
}