在 react-native 中映射时如何为某些组件提供 hide/show 功能

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.

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

Answer 1

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

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

Answer 2

您可以使用 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() => ...}

在 react-native 中映射时如何为某些组件提供 hide/show 功能

How to give hide/show feature to certain components when it is mapped in react-native

javascript

mapping

typescript

reactjs

react-native