在 react-native 中映射时如何为某些组件提供隐藏/显示功能答案

【问题标题】：How to give hide/show feature to certain components when it is mapped in react-native在 react-native 中映射时如何为某些组件提供隐藏/显示功能
【发布时间】：2021-11-30 19:36:21
【问题描述】：

我从 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 只显示两个组件。

【问题讨论】：

标签： javascript reactjs typescript react-native mapping

【解决方案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() => ...}

【讨论】：

【解决方案2】：

您可以根据索引过滤前两项的列表。

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

【讨论】：