React JS 中单个 .map() 内的多个三元运算符

Question

我正在映射数组中的数据，我只想在它们的值不同于 null 时显示它们。
我在这个数组中有多个对象（功率、精度、pp、...），我正在为每个对象做一个三元运算符。
这是我的代码（工作正常）：

{move?.past_values?.map((mp) => 
  mp?.power !== null ? (
    <li>Before {mp?.version_group?.name} : {mp?.power}</li>
  ) : (
    null
  )
)}

当我尝试这样做时:

mp?.power !== null ? (
    <li>Before {mp?.version_group?.name} : {mp?.power}</li>
  ) : (
    null
  )
mp?.accuracy !== null ? (
    <li>Before {mp?.version_group?.name} : {mp?.accuracy}</li>
  ) : (
    null
  )

它说我应该在第一个三元运算符的最后一个括号后加上“,”。
问题是我需要为第二个三元运算符重新映射整个数组，因为“mp”变得未定义。

有没有办法在单个映射函数中使用多个三元运算符，或者我是否每次都映射数组？

Answer 1

如果你以这种方式重构它，它应该可以工作，并且它是在 react 中进行条件渲染的更干净的方式

 {move?.past_values?.map((mp) => 
        <>
            {mp?.power !== null && 
            <li>Before {mp?.version_group?.name} : {mp?.power}</li>}

            {mp?.accuracy !== null && 
            <li>Before {mp?.version_group?.name} : {mp?.accuracy}</li>} )
        </>
    }

React JS 中单个 .map() 内的多个三元运算符

Multiple ternary operators inside a single .map() in React JS

reactjs

conditional-operator