javascript - 如何在对象数组上使用reduce 渲染jsx <div> 内的字符串

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

字符串在 JavaScript 中是不可变的，为了使其工作，您需要返回 acc.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)

附注

您可以简化渲染

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