React+TS项目使用map渲染数组无UI输出问题排查

核心问题 #

• 最直接的渲染失效原因：map 的回调函数使用了花括号包裹逻辑，但没有显式 return 要渲染的 <span> 元素。箭头函数使用花括号包裹逻辑时不会自动返回值，会默认返回 undefined，最终 map 执行后得到的是全为 undefined 的数组，React 不会渲染 undefined 类型的内容，因此看不到数组对应的展示项。
• 附加规范问题：遍历渲染的列表元素未设置唯一 key 属性，运行时控制台会抛出列表key缺失的警告，后续列表变更时可能出现渲染异常。

修复代码 #

你可以任选一种方式修改map部分的逻辑：

方案1：使用箭头函数隐式返回

去掉回调的花括号，改用圆括号包裹返回的JSX元素，触发箭头函数隐式返回：

<div className={classes['innerContainer']}>
  <div>
    {/* 注意key如果有price.id等唯一业务字段优先用业务字段，此处index仅作示例 */}
    {props.historicPrices?.map((price, index) => (
      <span key={index} className={classes['innerContainer__text']}>
        {t('historicPrices.currency.BTCUSD')}
        {price.price}
        {t('historicPrices.date')} 
      </span>
    ))}
    Oct 18 2021, 14:32
  </div>
</div>

方案2：保留花括号，手动添加return语句

如果回调内需要写额外逻辑，可以保留花括号，显式return对应的JSX：

<div className={classes['innerContainer']}>
  <div>
    {props.historicPrices?.map((price, index) => {
      // 此处可写额外的判断、计算逻辑
      return (
        <span key={index} className={classes['innerContainer__text']}>
          {t('historicPrices.currency.BTCUSD')}
          {price.price}
          {t('historicPrices.date')} 
        </span>
      )
    })}
    Oct 18 2021, 14:32
  </div>
</div>

SCSS代码本身没有问题，不需要修改。

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