我试图更改数组中对象列表中按钮的颜色。但不是更改1个按钮的颜色，而是更改每个按钮的颜色。在日志中，只有1个项目为真，但仍然有按钮的颜色也在更改。我基本上是在用户单击按钮时添加了1个属性，并将该特定属性设置为真。
模拟数据格式

export const UsageDataMock1 = [
    {
        id : 1,
        title : 'Name',
    },
    {
        id : 2,
        title : 'Place',
    },
    {
        id : 3,
        title : 'Animal',
    },
    {
        id : 4,
        title : 'Thing',
    },
    {
        id : 5,
        title : 'Monkey',
    }
]

父组件

const Usage = () => {

    const [data, setData] = useState(UsageDataMock1);
    let qwe = []
    const invoiceTitleRef = [];

    const onChange = (index, selectedTitle) => {
        // console.log('Selected Title => ', invoiceTitleRef[index].getSelectedTitle())
        console.log('selection ',invoiceTitleRef[index])
        const tempSelection = invoiceTitleRef[index].getSelectedTitle()
   setData(data.map((item, index) => {
            if(item.title == tempSelection)
            {
              return  ({...item, isSelected : 'true'})
            }
            else return  ({...item, isSelected : 'false'})
           
            
        }))

        

    }
  console.log('123', data)

    return (
        <AppBackground>
            <View style = {{flexDirection : 'row', marginTop : 50}}>
                {data.map((item, index) => (
                    <>
                    {console.log('asd', item, invoiceTitleRef[index])}
                    <InvoiceTitle 
                        ref={(element) => invoiceTitleRef[index] = element}
                        key={item.id} title={item.title} selected = {item?.isSelected}
                        onChange={onChange} index={index} />
                        </>
            ))}
            </View>
        </AppBackground>
    )
}

const styles = StyleSheet.create({
    container : {
        flexDirection : 'row',
        marginTop : 40,
    },
    titleContainer : {
        marginHorizontal  : 10,
        alignSelf : 'flex-start',
        paddingHorizontal : 10,
        paddingVertical : 8,
        borderRadius : 12,
    }
})

export default Usage

子组件

const InvoiceTitle = forwardRef(({
    title,
    onChange,
    index,
    key,
    selected = false,
    ...props
}: InvoiceTitleProps, ref) => {

    useImperativeHandle(ref, () => ({
       getSelectedTitle : () => title
    }))
  

    const [color , setColor] = useState('white')

    
    const onClick = () => {
        onChange(index, title)
    }

    return (
        <Pressable 
        key = {key}
        onPress={() => onClick()} 
            style = {({pressed}) => [styles.titleContainer,
             {backgroundColor :  selected ? 'red' : 'blue', opacity : pressed ? 0.5 : 1}]}>
           <AppText>{title}</AppText>
       </Pressable>
    )
})

const styles = StyleSheet.create({
    container : {
        flexDirection : 'row',
        marginTop : 40,
    },
    titleContainer : {
        marginHorizontal  : 10,
        alignSelf : 'flex-start',
        paddingHorizontal : 10,
        paddingVertical : 8,
        borderRadius : 12,
    }
})

export default InvoiceTitle

interface InvoiceTitleProps {
    title : string,
    onChange : Function,
    index : number,
    selected : boolean,
    key? : number
}