JSX map 函数中的 if 子句答案

【问题标题】：If clause in JSX map functionJSX map 函数中的 if 子句
【发布时间】：2022-01-07 03:07:29
【问题描述】：

所以我有这个代码来生成多个下拉列表。

<div>
  {['Mischung', 'Menge'].map((key) => (
    <select key={key}>
      {mischung.map(({ [key]: value }) => (
        <option key={value}>{value}</option>
      ))}
    </select>
  ))}
</div>

正在生成每个下拉列表，但值为空。

如您所见，其他下拉菜单中有空值。

如何检查 null 的值或它是否不为空。

【问题讨论】：

什么是mischung？ ({ [key]: value }) 似乎不正确。你能分享一个工作的sn-p（codesandbox，stackblitz），这样我们就可以玩了吗？此外，您可以在 map 之前运行 filter 以获取完整数组的子集。

标签： reactjs jsx

【解决方案1】：

<div>
  {['Mischung', 'Menge'].map((key) => (
    <select key={key}>
      {mischung.map(({ [key]: value }) => {
        if (value) {
          return (
            <option key={value}>{value}</option>
          )}
        }
      )}
    </select>
  ))}
</div>

【讨论】：