React JSX遍历数据遇字段缺失报错，需用0替代undefined显示

看起来你遇到的坑是遍历数据时，要么数组里混着undefined的元素，要么部分Item本身没有size字段——直接访问item.size或者简单的三元判断都会触发报错，核心原因是：当item本身是undefined时，你连它的size属性都没法读取，更别说做判断了。

我给你几个实用的解决方案，按推荐程度排序：

1. 可选链+空值合并（最简洁现代的写法） #

ES2020之后的语法，React项目完全支持，一步到位解决问题：

{item?.size ?? "0"}

• item?.size：先检查item是否存在（不是undefined或null），如果不存在直接返回undefined，不会抛出报错；如果存在，正常读取size字段。
• ?? "0"：如果左边结果是undefined或null，就显示"0"，否则显示size的实际值。
  这个写法还能完美处理size=0或空字符串这类你想正常显示的falsy值，比简单三元判断更精准。

2. 兼容旧环境的嵌套判断 #

如果你的项目还不能用ES2020语法，可以用嵌套条件先确保item有效：

{item && typeof item.size !== "undefined" ? item.size : "0"}

先判断item是否存在，再精确检查size字段是否定义——避免把size=0这种合法值误判为"不存在"。如果业务里size不可能是0或空字符串，也可以简化成：

{item && item.size ? item.size : "0"}

3. 先过滤无效元素再遍历 #

如果数组里确实混着undefined的元素，建议从源头过滤掉，后续遍历更省心：

{items.filter(item => item != null).map(item => (
  <div key={item.color}>{item.size ?? "0"}</div>
))}

filter(item => item != null)会把数组里的undefined和null全部过滤掉，后续就不用再担心item不存在的问题了。

为什么你之前的写法会报错？ #

你用的{item.size ? "itWorks" : "0"}，当item本身是undefined时，JavaScript会直接抛出「Cannot read property size of undefined」错误——因为你连item都没有，根本没法读取它的size属性。必须先确保item存在，才能去访问它的字段。

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