Question

我尝试将对象数组转换为列表。现在，我只想将对象的“类型”属性转换为列表项，但这不起作用。

这是我的代码：

constructor(props){
    super(props);
    this.travelRawdata = [{type:15}];
}
render(){
    return(
        <ul>
           {this.travelRawdata.forEach(element => <li>{element.type}</li>)}
        </ul>
);}

我没有任何输出。如果我使用console.log(element.type)可以正常工作，那么我认为我的HTML标签有问题吗？

Answer 1

forEach()将始终返回undefined。您想使用.map()来将数据转换为反应元素数组：

constructor(props){
    super(props);
    this.travelRawdata = [{type:15}];
}
render(){
    return (
        <ul>
           {this.travelRawdata.map(element => <li>{element.type}</li>)}
    </ul>
    );
}

注意：请务必阅读列表和键上的here。不包含元素的键，则每次更新数组时都会为每个元素重新渲染。

键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素赋予键，以赋予元素稳定的身份

Answer 2

您尝试过吗？

this.travelRawdata.map((item)=> { return (<li>{item.type}</li> })

渲染对象数组以在JSX中列出

2 个答案: