使用react条件呈现,如何避免0被视为未定义?

零不是 truthy javascript中的值。 这样可以呈现0或更多的值。

return (
  <div>
      {rating.score > -1  && (
       <div>do something</div>
      )}
  </div>
);

发生了什么事 0 是一个错误的值,它强迫 false 但是,在布尔上下文中,您可以只检查该值是否大于或等于零(假设大于负值无效):

return (
  <div>
      {rating.score > 0 && (
       <div>do something</div>
      )}
  </div>
);

编辑时的条件不起作用,因为在表达式中 rating.score && rating.score >= 0 ,第一个操作数, rating.score 会是假的。

万一 rating.score 一定是 undefined 或者一个数字,它是:

(rating.score >= 0) && (...)

注意,这同样不适用于其他错误的值 like null . 如果有可能这是一个错误而不是一个数字,这应该变成:

(rating.score === 0 || rating.score > 0) && (...)

这也有利于可读性(至少对于意识到上述问题的开发人员而言),因为条件是明确的。

你有很多方法可以解决这个问题,我不能说只有一个答案。你可能要考虑的一件事是 isFinite() 全局或 Number 方法即 Number.isInteger() .

在这些情况下,您可以帮助检查您正在使用的号码是否是有效的号码,并有助于防范 Infinty 或 NaN (尽管 南 无论如何都是错误的价值观)。

利益 isFinite 它也将把被转换成字符串的数字转换成 "10" 将通过。不确定这是否值得关注。

{isFinite(rating.score) && (
  <div>do something</div>
)}