Отображение маркеров из React Native Maps с использованием forEach

Question

У меня есть этот массив в моем состоянии:

coinCoordinatesArray: [
        {
        latitude: 37.78825,
        longitude: -122.4324},
        {
        latitude: 38.78825,
        longitude: -120.4324},
        {
        latitude: 31.78825,
        longitude: -80.4324},
        {
        latitude: 55.78825,
        longitude: -95.4324}

Я пытаюсь визуализировать маркеры, используя координаты из состояния:

            {this.state.coinCoordinatesArray.forEach((coordinate) => {
                        return  (<MapView.Marker
                          onPress={() => alert('fire')}
                          icon={require('./assets/coin_small.png')}
                          coordinate={coordinate}
                          />)
            })}

Однако маркеры вообще не отображаются, но я также не получаю никаких ошибок.

Answer 1

forEach ничего не возвращает - вместо этого используйте map:

{this.state.coinCoordinatesArray.map((coordinate) => {...})}

Answer 2

Вы делаете forEach(), который просто генерирует элементы, вы, вероятно, хотите вместо этого сделать map(), чтобы ваши элементы накапливались в массив и отображались.

Answer 3

Вместо использования forEach(), который не возвращает новый массив, вы должны использовать map().

Заменить:

{this.state.coinCoordinatesArray.forEach((coordinate) => { ...

С:

{this.state.coinCoordinatesArray.map((coordinate) => { ...

Редактировать: Рабочий пример:

https://snack.expo.io/S1kstGNhV

Выход: