反應本機條件渲染具有 2 個條件的數組

Question

我有一個包含多個對象的數組。 在每個 object 中，我都有一個名為 type 的字段，可以是 a 或 b。 我正在嘗試有條件地呈現類型 a 的特定視圖和類型 b 的特定視圖。

這是我的數組：

DATA=[
{id:1, type:'a'},{id:2,type:'b'}
]

return(
{DATA.type === 'a' ?

<Text>I am type A</Text>
:
<Text>I am Type B </Text>
}
)

當我這樣做時，屏幕上什么也沒有出現。

更新

DATA=[
{id:1, type:'a',locked:true},
{id:2,type:'b',locked:false}
]

const[isLocked,setIsLocked]=useState(false)

return(

{isLocked && DATA.map((item) => item.type === 'a')) ?

<Text>I am type A</Text>
:
null}
)

它仍然無法正常工作。 我是類型 A 仍然出現在我輪播的所有頁面上。

Answer 1

你需要 map 你的數組來完成它。 否則，您將無法獲得正確的密鑰。

DATA = [
  { id:1, type:a },
  { id:2, type:b },
]

return(
  DATA.map((item) => item.type === 'a' 
    ? <Text>I am type A</Text>
    : <Text>I am Type B </Text>
))