javascript - JavaScript 对象中的条件渲染元素

Question

我想做的是有条件地呈现我的对象中的一个元素，即如果 chosenHour 键(在 hoursInfo 数组内)等于 19 :30 然后我想让整个元素不被渲染，所以我只有两个元素而不是三个。

问题是，如果不满足条件，IFE 将返回 null，所以我仍然有三个元素的对象，第二个元素为 null。一切都在 React 中完成，所以我认为使用 IFE 以便在没有 else 部分的情况下使用 if 语句是个好主意。

这是我的代码:

bookingObjToSend = {
    name, email, phone, kidsNo, adultsNo, fullDate, year, month, day, chosenRoom,
    hoursInfo: [
        { chosenHour: 
            chosenHour ==='9:30' ? '9:15' :
            chosenHour ==='12:00' ? '12:15' :
            chosenHour ==='14:30' ? '13:45' :
            chosenHour ==='17:00' ? '16:45' :
            chosenHour ==='19:30' ? '19:45' : null ,
         renderedByBirthday: true, isBirthday: false },
        (() => {
            if(chosenHour !== '19:30'){ return { chosenHour:                         
                chosenHour ==='9:30' ? '10:45' :
                chosenHour ==='12:00' ? '13:45' :
                chosenHour ==='14:30' ? '15:15' :
                chosenHour ==='17:00' ? '18:15' :
                null ,
             renderedByBirthday: true, isBirthday: false}}
        })(),
        { chosenHour, isBirthday: true}
    ]
}

Answer 1

你可以使用 filter从数组中过滤掉所有虚假元素以摆脱潜在的 null 值。

bookingObjToSend = {
    name, email, phone, kidsNo, adultsNo, fullDate, year, month, day, chosenRoom,
    hoursInfo: [
        { chosenHour: 
            chosenHour ==='9:30' ? '9:15' :
            chosenHour ==='12:00' ? '12:15' :
            chosenHour ==='14:30' ? '13:45' :
            chosenHour ==='17:00' ? '16:45' :
            chosenHour ==='19:30' ? '19:45' : null ,
         renderedByBirthday: true, isBirthday: false },
        (() => {
            if(chosenHour !== '19:30'){ return { chosenHour:                         
                chosenHour ==='9:30' ? '10:45' :
                chosenHour ==='12:00' ? '13:45' :
                chosenHour ==='14:30' ? '15:15' :
                chosenHour ==='17:00' ? '18:15' :
                null ,
             renderedByBirthday: true, isBirthday: false}}
        })(),
        { chosenHour, isBirthday: true}
    ].filter(Boolean)
}