在 FlatList 中隐藏选择的项目答案

【问题标题】：Hide picked items in a FlatList在 FlatList 中隐藏选择的项目
【发布时间】：2023-03-20 09:43:01
【问题描述】：

我正在使用 react-native FlatList 对元素的数据来自外部 API 进行渲染。

我想防止用户两次选择相同的项目。所以我打算这样做的方式是在他们挑选项目后隐藏它。

假设我有一个状态 picked 像这样

  const [ picked, setPicked ] = useState(false);

更改它当然会隐藏所有元素。

      <FlatList
        {/*some other props*/}
        data={allCards}
        renderItem={(card: ListRenderItemInfo<CardsProps>) => (
          <TouchableOpacity
            style={[ styles.holder, { display: picked ? "none" : "flex" } ]}
            onPress={() => handleChoice(parseInt(card.item.id))}
          >
            <Card
             {/*some card props*/}
            />
          </TouchableOpacity>
        )}
      />

我怎样才能改变 FlatList 中只有一个元素的状态？有没有更好的方法来做同样的工作？

【问题讨论】：

标签： reactjs typescript react-native react-native-flatlist

【解决方案1】：

这样试试，会成功的，

<FlatList
        {/*some other props*/}
        data={allCards}
        renderItem={(card: ListRenderItemInfo<CardsProps>) => picked ? (
          <TouchableOpacity
            style={[ styles.holder, ]}
            onPress={() => handleChoice(parseInt(card.item.id))}
          >
            <Card
             {/*some card props*/}
            />
          </TouchableOpacity>
        ): undefined}
      />

【讨论】：

不！同样的问题。选择一张牌后，所有牌都消失了。
那是因为你只有一个状态并且通过那个状态进行检查，所以当你将该状态设置为true时，它会消失另一个，所以你需要通过id或index等任何属性来检查卡片或者别的什么，你必须通过它来检查你的卡是否被选中。
是的，这正是我面临的问题。你能给我一个例子，说明如何让列表中的一个元素的状态只改变
获取一个数组，您将在选择卡片期间将项目添加到该数组中，然后获取一个函数，您应该检查卡片是否被选中（从您放置所有选择的新数组中牌）。如果卡在新数组中可用，则应将其从 allCards 数组中删除。