如何在react-native中映射某些组件时赋予其隐藏/显示功能

Question

我从api得到一定的响应:

[
{   
"name": "cds",
"user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf"
},
{   
"name": "asd",
"user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf"
},
{
"name": "qee",
"user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf"
},
{
"name": "cbb",
"user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf"
},
{
"name": "rty",
"user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf"
},
]

我正在使用一个组件来显示这个api的细节:

<TouchableOpacity>
<Text>Toggle</Text>
</TouchableOpacity>
{upcoming.map((item: any, key: any) => (
<>
<UpComingComponent
name={item.name}
/>
</>
))}

我能够成功地映射组件，但是我需要有一个功能，其中最初用户只能看到两个映射的UpComingComponent，当用户单击toggle时，用户应该看到所有映射的UpComingComponent，当他再次单击toggle时，用户显示再次只看到两个UpComingComponent。

我知道如何隐藏/显示组件，但我的问题是我最初显示两个组件，然后toggle，显示所有组件，再toggle，只显示两个组件。

Answer 1

您可以使用Array.slice并将其与toggle的状态变量结合使用:

const [toggle, setToggle] = useState(false)
<TouchableOpacity onPress={() => setToggle(t => !t)}>
<Text>Toggle</Text>
</TouchableOpacity>
{toggle ? upcoming.map((item: any, key: any) => (
<>
<UpComingComponent
name={item.name}
/>
</>
)) : upcoming.slice(0,2).map() => ...}

Answer 2

您可以根据前两项的索引对列表进行筛选。

upcoming
.filter((item, index) => (!showAll ? index < 2 : true))
.map((item) => (
<>
<UpComingComponent name={item.name} />
</>
));