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

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()改用，将您的数据转换为一组 react 元素：

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

注意：请务必在此处阅读列表和键。不包括元素的键，每次更新数组时都会导致每个元素的重新渲染。

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素提供键，以使元素具有稳定的身份