JSX map函数中如何判断过滤null/空值，解决生成的下拉选项为空问题

你可以在渲染<option>的逻辑前添加过滤规则，过滤掉null、undefined、空字符串等无效值，修改后代码如下：

<div>
  {['Mischung', 'Menge'].map((key) => (
    <select key={key}>
      {mischung
        .map(item => item[key])
        // 过滤无效值，可根据实际需求调整判断条件
        .filter(value => value != null && value !== '')
        .map(value => (
          <option key={value}>{value}</option>
        ))}
    </select>
  ))}
</div>

判断逻辑说明 #

• value != null 可以同时过滤null和undefined两种无效值，无需分开写两次判断
• 追加value !== '' 可以过滤空字符串选项，如果你业务中需要保留空字符串，删除该条件即可
• 如果需要过滤纯空格的内容，可以在判断条件中补充&& value.trim() !== ''

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