React中NaN意外通过布尔条件的问题及解决方法

要实现仅当value为有效数字时显示文本，否则显示<Skeleton>，需要准确排除NaN、null和undefined这几种无效情况，以下是可行的解决方案：

方案一：严格检查类型+排除NaN #

利用typeof判断是否为数字类型，再结合!isNaN()排除NaN：

{typeof value === 'number' && !isNaN(value) ? (
  <p>{value} people are waiting.</p>
) : (
  <Skeleton />
)}

方案二：利用NaN的特殊性 #

NaN是唯一不等于自身的值，结合value != null排除null和undefined：

{value != null && value === value ? (
  <p>{value} people are waiting.</p>
) : (
  <Skeleton />
)}

之前判断无效的原因 #

• 第一种value ? ...：若value是字符串"NaN"（即使类型声明为number，实际可能存在类型不匹配），布尔判断会返回true，导致错误显示文本；若为number类型的NaN，布尔判断为false，本应走Skeleton，但可能你的实际场景中value是字符串类型的"NaN"。
• 第二种value && !isNaN(value)：若value是number类型的NaN，value在布尔上下文为false，条件整体为false，本应走Skeleton，但如果value是其他非数字类型的有效值（如字符串），isNaN()会先做类型转换，可能导致判断逻辑失效。
• 第三种value && value !== "NaN"：若value是number类型的NaN，value在布尔上下文为false，条件不成立，但如果value是字符串"NaN"，value !== "NaN"为false，条件也不成立，不过这种判断没有区分有效数字和其他有效值，逻辑不严谨。

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