React with TypeScript：当Props中的数组为空时如何在Map视图中显示提示消息

AI 小北

2026-4-30

解决historicPrices为空时显示提示消息的问题

嘿，这个问题很好解决，咱们用React的条件渲染就能轻松搞定。首先得明确：你的historicPrices可能是null，也可能是空数组[]，所以得把这两种无数据的情况都覆盖到，然后渲染对应的提示文本。

修改后的view.tsx代码示例

<div className={classes['innerContainer']}>
  {/* 检查historicPrices是否存在且包含数据 */}
  {props.historicPrices?.length ? (
    props.historicPrices.map((price, idx) => (
      <li className={classes['innerContainer__text']} key={idx}>
        {t(`historicPrices.currency.${currency}`)} {price.price} {t('historicPrices.date')} {price.createdAt}
      </li>
    ))
  ) : (
    {/* 无数据时显示提示，建议用国际化文本 */}
    <p className={classes['innerContainer__empty-message']}>
      {t('historicPrices.noData')}
    </p>
  )}
</div>

关键细节说明

使用?.length进行安全检查：因为historicPrices可能是null，可选链操作符?.能避免直接访问null的length导致报错。
条件渲染逻辑：当数组有内容（长度大于0）时渲染价格列表，否则渲染提示消息。
样式优化：给提示文本加个单独的样式类（比如innerContainer__empty-message），方便你设置字体、颜色、间距等样式，提升用户体验。
小建议：尽量避免用数组索引idx作为key，如果price对象有唯一标识（比如id），用它作为key会更稳定。