如何在 React 中条件性地渲染数组元素

霞舞 2025-12-31 00:00:00 次阅读

在 react 中，若需根据条件（如日期是否过期）筛选并渲染数组中的对象，应先用 filter() 筛选有效数据，再用 map() 渲染，而非在 map 内部嵌套逻辑判断——后者会导致空项（false）被渲染为 null，破坏 dom 结构且易引发警告。

在实际开发中，常见需求是仅渲染“未来预约”（即日期未过期的医生预约）。直接在 map 回调中使用逻辑与操作符（如 &&）看似简洁，但存在严重问题：当条件为 false 时，表达式返回 false，而 React 会将其渲染为一个真实的 false 文本节点（或在严格模式下抛出警告），导致 UI 异常或控制台报错。

✅ 正确做法是职责分离：先用 filter() 提取符合条件的数据子集，再用 map() 安全遍历渲染。例如：

{
  doctorsApptData
    .filter(apptData => new Date(apptData.date) >= new Date())
    .map((apptData, index) => (
      ✅ 这个日期有效！{apptData.date}
    ));
}

⚠️ 注意事项：

务必添加 key 属性：map 渲染列表时，每个元素必须有唯一、稳定（推荐使用 ID 而非索引）的 key，否则可能引发性能问题或状态错乱；

日期比较要严谨：apptData.date 若为字符串（如 "2025-05-20"），需先转为 Date 对象再比较；直接字符串比较（如 "2025-05-20" >= "2025-05-19"）虽在 ISO 格式下可行，但不具健壮性；
避免副作用：filter 和 map 应保持纯函数特性，不修改原数组、不触发异步或 DOM 操作；
空数组安全：filter().map() 天然支持空结果，无需额外判断，代码更简洁可靠。