反应原生元素 listItem.accordion

Question

//我在 FLatlist 的帮助下渲染了一个 API 响应，但是当我按下展开选项时，它会打开所有的手风琴......

import { View, Text, StyleSheet, FlatList } from 'react-native'
import React, { useState } from 'react'
import SearchBox from '../../components/SearchBox/SearchBox'
import { ListItem, Icon, Slider } from '@rneui/themed'
import { useSelector } from 'react-redux'
import { getAllPackages } from '../../feature/packageSlice'

const Rounds = () => {
    const [expanded, setExpanded] = useState(false)

    const pack = useSelector(getAllPackages)

//平面列表渲染项

    const renderItem = ({ item }) => {
        return (
            <ListItem.Accordion
                content={
                    <>
                        <ListItem.Content>
                            <ListItem.Title style={styles.header}>
                                {item.name}
                            </ListItem.Title>
                        </ListItem.Content>
                    </>
                }
                isExpanded={expanded}
               onPress={() => {
                    setExpanded(!expanded)
                }}
            >
                <View style={styles.card}>
                    <Text style={styles.font}>Water Supply Pressure</Text>
                    </View>
                </View>
            </ListItem.Accordion>
        )
    }

//主渲染

    return (
        <View>
                    <FlatList
                    data={pack}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                
                />
            </View>
        </View>
    )
}


export default Rounds

我只想打开选定的手风琴，我该如何实现，请帮助，谢谢....................... ..................................................... ..................................................................

Answer 1

如果我正确理解您的代码并且这是一个组件（不是少数几个），您的问题如下：

const [expanded, setExpanded] = useState(false)

这个 state 变量位于您的父组件之上，因此每个呈现的项目都指向它。 因此，如果您从任何 ListItem.Accordion 更改它，它将影响所有这些。

但

如果您将 renderItem 更改为呈现 Component。 像这样：

const renderItem = ({ item }) => {
        return (
           <AccordionListItem item={item}/>
        )
}

然后您可以将这个 state 移动到 AccordionListItem 本身，因此它将为组件的每个唯一实例创建唯一实例。

//imports
import React from ...

const AccordionListItem = ({item}) => {
const [expanded, setExpanded] = useState(false) <========= !


return (
      <ListItem.Accordion
                content={
                    <>
                        <ListItem.Content>
                            <ListItem.Title style={styles.header}>
                                {item.name}
                            </ListItem.Title>
                        </ListItem.Content>
                    </>
                }
                isExpanded={expanded}
               onPress={() => {
                    setExpanded(!expanded)
                }}
            >
                <View style={styles.card}>
                    <Text style={styles.font}>Water Supply Pressure</Text>
                    </View>
                </View>
            </ListItem.Accordion>
)
}

export default AccordionListItem ;