Show/hide List.accordion with button with react-native?

Question

我有一个反应本机应用程序。我尝试切换 List.Accorion。我有一些卡片。每张卡片上都有一个图标。如果用户触发图标，则必须显示或隐藏 List.Accorion。但目前的情况是，如果用户触发图标，则每张卡片中的所有 List.Accorions 都将被隐藏或显示。不正确的是。

所以这是代码：

const [breakfastExpanded, setBreakfastExpanded] = useState(false);
const [showAccordion, setShowAccordion] = useState(false);

const toggleAccordion = () => {
        setShowAccordion(!showAccordion);
    };


    <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    return (
                        <>
                            <TouchableOpacity
                                onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                                <Spacer position="top" size="large">
                                    <CategoryInfoCard category={item} />
                                </Spacer>
                            </TouchableOpacity>
                            <View>
                                <ButtonDetail onPress={toggleAccordion}>
                                    <AntDesign name="twitter" size={24} color="green" />
                                </ButtonDetail>
                            </View>
                            {showAccordion && (
                                <List.Accordion
                                    title="Description"
                                    left={(props) => <List.Icon {...props} icon="bird" />}
                                    expanded={breakfastExpanded}
                                    onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                                    <List.Item title={item.description} />
                                </List.Accordion>
                            )}                          
                            
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />

问题：如何仅在图标被触发的地方隐藏/显示 List.Accorion？

Answer 1

试试这个

const AppRoot = () => {
  const [breakfastExpanded, setBreakfastExpanded] = useState(false);
  const [showAccordion, setShowAccordion] = useState([]);

  const toggleAccordion = (id) => {
    if (showAccordion.includes(id)) {
      let UpdateIds = [...showAccordion]
      UpdateIds = UpdateIds.filter((ID) => ID != id)
      setShowAccordion(UpdateIds)
    } else {
      let UpdateIds = [...showAccordion]
      UpdateIds = UpdateIds.push(id)
      setShowAccordion(UpdateIds)
    }
  };


  return (<CategoryList
    data={categoryList}
    renderItem={({ item }) => {
      return (
        <>
          <TouchableOpacity
            onPress={() => navigation.navigate("groepen", { subcategories: item.id })
            }>
            <Spacer position="top" size="large" >
              <CategoryInfoCard category={item} />
            </Spacer>
          </TouchableOpacity>
          <View >
            <ButtonDetail onPress={() => toggleAccordion(item.id)}>
              <AntDesign name="twitter" size={24} color="green" />
            </ButtonDetail>
          </View>
          {
            showAccordion.includes(item.id) && (
              <List.Accordion
                title="Description"
                left={(props) => <List.Icon {...props} icon="bird" />}
                expanded={breakfastExpanded}
                onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                <List.Item title={item.description} />
              </List.Accordion>
            )}

        </>
      );
    }}
    keyExtractor={(item) => item.id}
  />)


};