Как визуализировать строку внутри jsx <div>, используя Reduce для массива объектов

Question

Я хочу отобразить список кодов мест остановок рейсов. У меня есть массив объектов остановок:

flight = {
departStops:1,
departSegments:{
 {
    departure: {iataCode: "TXL"},
    arrival: {iataCode: "FRA"}
   },
 {
    departure: {iataCode: "FRA"},
    arrival: {iataCode: "YUL"}
   }
}

внутри функции компонента перед возвратом я создал строковую константу:

const myString = flight.departSegments.reduce((acc,item) => {
                        if (item.arrival.iataCode !== flight.departSegments[flight.departSegments.length - 1].arrival.iataCode) {
                            if (acc.length > 0) {
                                acc.concat(',',item.arrival.iataCode)
                            } else {
                                acc.concat(item.arrival.iataCode)
                            }
                        }
                        return acc
                    },"")

и вот как я отрисовываю свою строку внутри компонента:

<div>
    {
        flight.departStops > 0 
        ?
        myString
        : 
        null
    }
</div>

проблема в том, что myString остается пустой строкой при рендеринге

Answer 1

Вам нужно возвращаться из Reduce, как это

if (item.arrival.iataCode !== flight.departSegments[flight.departSegments.length - 1].arrival.iataCode) {
    if (acc.length > 0) {
         return acc.concat(',',item.arrival.iataCode)
    } else {
         return acc.concat(item.arrival.iataCode)
    }
  }

Кроме того, способ, которым вы построили отправление, плох. Это должен быть массив, а не объект.

Answer 2

Строки являются неизменяемыми в javascript, чтобы заставить его работать, вам нужно вернуть cc .concat () результат

const flight = {
  departStops: 1,
  departSegments: [
    {
      departure: { iataCode: 'TXL' },
      arrival: { iataCode: 'FRA' }
    },
    {
      departure: { iataCode: 'FRA' },
      arrival: { iataCode: 'YUL' }
    }
  ]
}

const myString = flight.departSegments.reduce((acc, item) => {
  if (
    item.arrival.iataCode !==
    flight.departSegments[flight.departSegments.length - 1].arrival.iataCode
  ) {
    if (acc.length > 0) {
      return acc.concat(',', item.arrival.iataCode)
    } else {
      return acc.concat(item.arrival.iataCode)
    }
  }
  return acc
}, '')

console.log(myString)

PS

Вы можете упростить рендер

<div> { (flight.departStops > 0) && myString } </div>