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

时间:2018-11-03 06:42:09

标签: reactjs redux

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子对象无效(找到:带有键{}的对象)。如果要渲染子级集合,请改用数组。

像这样获取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"
  }
]

1 个答案:

答案 0 :(得分:0)

现在我想我知道,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>
        )
    }
}