错误现象

代码如下:

{camera_id && (
  <div>{camera_id}号相机</div>
)}

当 camera_id>0 的时候,正常显示 x 号相机

当 camera_id=0 的时候,异常显示 0,而不是 0 号相机

错误原因

这是因为在 JavaScript 中,0 被视为 falsy 值,因此当 camera_id0 时,条件判断 camera_id && 会返回 false。所以后面的内容不被渲染。

但是 0 是可以被 react 渲染的,所以最后显示的是 0,而不是不显示。

解决方法

涉及到数字且可能为 0 的时候,不要直接使用&&来判断,而是使用

{camera_id !== undefined && (
  <div>{camera_id}号相机</div>
)}

参考

reactjs - React showing 0 instead of nothing with short-circuit (&&) conditional component - Stack Overflow