时间戳

首页 > 解决方案 > “对象作为 React 子项无效（找到：带有键 {} 的对象）。”

reactjs - “对象作为 React 子项无效（找到：带有键 {} 的对象）。”

问题描述

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"
  }
]

标签： reactjsredux

解决方案

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

推荐阅读