我如何在映射中使用真实条件的映射但没有假条件的映射来执行三元运算符

Question

我正在尝试 return 一个 table，其中的数据映射自 api。当条件为真时，我希望数据被映射并 returned 但当条件为假时，我希望消息被 returned.
这是我的代码：

{ability?.pokemon?.map((ap) => 
  ap.is_hidden === false ? (
    <tr key={ap.pokemon.name} className='ability_container_table_body_row'>
      (multiple td tag)
    </tr>
  ) : (
    <tr>
      <td>No pokémon has this ability</td>
    </tr>
  )
)}

问题是我需要映射 ability.pokemon，否则它只会 return 数组第一个对象的数据。
上面的代码是 returning 多条消息（一个用于每个不检查条件的口袋妖怪），我希望它只呈现一次。

编辑：我正在使用 React JS

Answer 1

let items = []
const allHidden = ability?.pokemon?.every(ap => ap.is_hidden)
if (allHidden) {
  // No pokemon has this ability
  items = <tr><td>No pokemon has this ability</td><tr>
} else {
 // ... map all visible ones here
 items = ability?.pokemon?.map(ap => !ap.is_hidden && (
    <tr key={ap.pokemon.name} className='ability_container_table_body_row'>
      (multiple td tag)
    </tr>
  ))}
}
return <table>{items}</table> // return or assign items: just an example

检查是否所有口袋妖怪都被隐藏了。如果为 true，则显示你的“No pokemon”，如果不是，则映射可见的。

every 方法检查是否所有映射都符合条件。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

https://jsfiddle.net/04fz683g/1/

我如何在映射中使用真实条件的映射但没有假条件的映射来执行三元运算符

How can I do a ternary operator inside a map with the mapping for the true condition but without the mapping for the false

conditional-operator

reactjs