React中对数组执行map操作时如何忽略title为null/undefined的项

解决方法 #

你可以通过两种常用方式实现需求，更推荐第一种先过滤再遍历的写法，逻辑更清晰易维护：

方法1：先过滤数组，再遍历渲染 #

先用filter方法把title为null/undefined的项提前过滤掉，再执行map渲染：

return (
  <div>
    <h1>Notes</h1>
    <ul>
      {plans
        // 过滤掉title为null/undefined的项，不会误伤空字符串、0这类有效值
        .filter(plan => plan.title != null)
        .map((plan, i) => (
          <li className="something" key={i}>
            <span className="somethingels">{plan.title}</span>
          </li>
        ))}
    </ul>
  </div>
);

如果你的业务场景里空字符串''也属于无效标题需要过滤，可以把过滤条件改成.filter(plan => Boolean(plan.title))。

方法2：map渲染时加条件判断 #

在map方法内做条件校验，不符合要求的项直接返回null，React会自动跳过null的渲染：

return (
  <div>
    <h1>Notes</h1>
    <ul>
      {plans.map((plan, i) => 
        plan.title != null ? (
          <li className="something" key={i}>
            <span className="somethingels">{plan.title}</span>
          </li>
        ) : null
      )}
    </ul>
  </div>
);

内容的提问来源于stack exchange，提问作者Kim-Jun-Un