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

Вот мой код:

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?

2
Q.uestion 8 Окт 2018 в 22:33

2 ответа

Лучший ответ

forEach() будет всегда возвращать undefined. Вы хотите использовать .map() вместо этого, чтобы преобразовать ваши данные в массив элементов реакции:

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

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

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

5
Goodbye StackExchange 8 Окт 2018 в 19:38

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

this.travelRawdata.map((item)=> { return (<li>{item.type}</li> })
0
Lukasz 8 Окт 2018 в 19:34