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"
}
]
答案 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>
)
}
}