Визуализировать массив объектов для отображения в JSX

Question

Я пытаюсь преобразовать массив объектов в список.Сейчас я просто хочу преобразовать свойство «type» моего объекта в элемент списка, но оно не работает.

Вот мой код:

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>
    );
}

Примечание: Обязательно прочитайте здесь в списках и ключах.Не включая ключ для элемента, каждый раз при обновлении массива выполняется повторное рендеринг каждого элемента.

Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены.Ключи должны быть даны элементам в массиве, чтобы дать элементам устойчивую идентичность

Answer 2

Вы пробовали это?

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