React开发中如何在渲染阶段隐藏接口返回的null值？

你当前的写法逻辑本身可以过滤JS原生null值，React原生也不会渲染null、undefined这类值。出现显示null字样的情况，大概率是接口返回的status是字符串类型的"null"，而非JS原生的null值，字符串"null"属于真值，会通过&&的条件判断被渲染出来。

以下是不同场景下的解决方案： #

场景1：仅需过滤原生null、undefined #

可以把判断条件替换为!= null，该写法会同时匹配null和undefined两种空值，比直接用&&的判断更精准，避免0、空串这类合法值被误过滤：

{name != null && (
  <span>
    {name}
    <br />
  </span>
)}
{status != null && (
  <span>
    {status}
  </span>
)}

场景2：需要过滤所有假值（包含空串、0、false、null、undefined） #

用Boolean()方法把值转成布尔类型后再判断：

{Boolean(name) && (
  <span>
    {name}
    <br />
  </span>
)}
{Boolean(status) && (
  <span>
    {status}
  </span>
)}

场景3：确认接口返回的是字符串"null" #

额外加字符串匹配判断即可：

{status != null && status !== 'null' && (
  <span>
    {status}
  </span>
)}

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