Реагировать - проблема с отображением элементов в массиве

Question

У меня есть массив местоположений, которые пытаются показать его значение на моей странице, я использовал следующий код для просмотра массива:

{this.props.locations && this.props.locations.forEach(loc => {
    console.log("Location: "+loc)
    return(
        <span>Location is: {loc}</span>
    )
})} 

Результат на странице ничто: введите описание изображения здесь Однако это регистрирует местоположение правильно: введите описание изображения здесь

Я получаю значения this.props.locations в App.js, как показано ниже:

 var locations = this.state.cardLists
      var distictLocations = new Set()
      locations.forEach(location => {
        if(!distictLocations.has(location.Location))
        {
          distictLocations.add(location.Location)
        }
      });
     this.setState({
       locations: distictLocations
     })

Я не уверен, что делаю не так. любая помощь будет оценена.

Answer 1

.forEach метод просто перебирает элементы массива, но ничего не возвращает.

Если locations - это Array, используйте .map:

{
    this.props.locations && this.props.locations.map(loc => {
        console.log("Location: " + loc)
        return (
            <span>Location is: {loc}</span>
        )
    })
}

Если locations - это Set использование Array.from:

{
    this.props.locations && Array.from(this.props.locations, loc => {
        console.log("Location: " + loc)
        return (
            <span>Location is: {loc}</span>
        )
    })
}

Также рекомендуется добавить key prop в сопоставленные элементы из соображений производительности.

---

Рекомендуемое чтение:

forEach против карты

Array.from

Списки и ключи в React

Сверка и ключи