如何有条件地映射对象数组？以过滤未过期医生预约为例

要实现只映射未过期的医生预约，最稳妥清晰的方式是先过滤数组，再映射渲染，或者在映射时通过条件判断返回有效组件或null。

方法一：先过滤（filter）再映射（map）（推荐） #

先把未过期的预约筛选出来，再对筛选后的数组进行映射，逻辑清晰且避免无效渲染：

{doctorsApptData
  .filter(apptData => apptData.date >= DateTime.now())
  .map(apptData => (
    <div key={apptData.id}>This date is valid! {apptData.date}</div>
  ))
}

注意：React列表渲染必须给每个元素加唯一的key属性，这里假设每个预约对象有id字段，你可以根据实际情况替换成唯一标识。

方法二：映射时通过三元判断返回组件或null #

如果不想额外过滤数组，也可以在map内部用三元表达式，不符合条件时返回null（React会忽略null的渲染）：

{doctorsApptData.map(apptData => (
  apptData.date >= DateTime.now() ? (
    <div key={apptData.id}>This date is valid! {apptData.date}</div>
  ) : null
))}

为什么你之前的写法失效？ #

你之前用&&逻辑判断的写法，当条件不满足时会返回false，React虽然不会渲染布尔值，但在列表中混合返回布尔值和组件，可能导致渲染异常或逻辑混乱，而且这种写法可读性较差，不推荐使用。

内容的提问来源于stack exchange，提问作者programmerGuy