Question

我有Flatlist带有一组项目，当我选择一个项目时，所有其他项目都采用所选项目grey的状态/颜色。如何确保只有选定的项目才能更改状态？

我选择的项目也存储在Firestore数据库中，并且在未选择时将被删除。您还可以帮助我将更改后的状态存储到firestore db中。谢谢，感谢您的努力。

    const [catalogueArray, setCatalogueArray] = useState([])
    const [addCompare, setAddCompre] = useState(false)
    const [textvalue, setTextValue] = useState(`Add to \n Cart`)
    const [textColor, setTextColor] = useState('green')

    const storeToDB = async (item) => {

        if (!addCompare) {
            await db.collection('users').doc(auth.currentUser.uid)
                    .collection('myProducts').doc(item.storeName + item.genName)
                    .set({
                       product_id: item.id,
                       product_genName: item.genName
                     })
           } else {
            await db.collection('users').doc(auth.currentUser.uid)
                    .collection('myProducts').doc(item.storeName + item.genName).delete()
        }
    }

    const clickedBtn = () => {

        setAddCompre(!addCompare ? true : false)
        setTextValue(!addCompare ? `Item \n Added` : `Add to \n Cart`)
        setTextColor(!addCompare ? 'grey' : 'green')
    }
render(
     ....
     <FlatList
        keyExtractor={(item) => item.id}
        data={catalogueArray}
        renderItem={({ item }) => (
                    ......
                 <TouchableOpacity style={styles.btn} onPress={() => { storeToDB(item); clickedBtn() }}>
                    <MaterialCommunityIcons name='plus-circle-outline' size={24} color={textColor} />
                     ......
                    <Text style={...}>{textvalue}</Text>
                 </TouchableOpacity>
        />

Answer 1

    const [isSelected, setIsSelected] = useState([])
    const [addCompare, setAddCompare] = useState(false)

    const catalogueList = () => {

        const catalogue = data.filter(item => {
            return item.storeName == navigation.state.params.selectStore
        }).map(item => ({ ...item }))
        setCatalogueArray(catalogue)
    }


    const storeToDB = async (item) => {

        if (!addCompare) {

            await db.collection('users').doc(auth.currentUser.uid).collection('myProducts').doc(item.storeName + item.genName).set({
                product_id: item.id,
                product_genName: item.genName
            })
        } else {

            await db.collection('users').doc(auth.currentUser.uid).collection('myProducts').doc(item.storeName + item.genName).delete()
        }
    }

    const clickedBtn = async (item) => {

        setAddCompare(
            addCompare ? false : true
        )

        if (isSelected.indexOf(item) > -1) {
            let array = isSelected.filter(indexObj => {
                if (indexObj == item) {
                    return false
                }
                return true
            })
            setIsSelected(array)
        } else {
            setIsSelected([
                ...isSelected, item
            ])
        }
    }

    return (
            ....
            <FlatList
                extraData={isSelected}
                keyExtractor={(item) => item.id}
                data={catalogueArray}
                renderItem={({ item }) => (
                    <View style={styles.contain}>
                        <TouchableOpacity style={styles.btn} onPress={() => { storeToDB(item); clickedBtn(item) }}>
                            <MaterialCommunityIcons name='plus-circle-outline' size={24} color={isSelected.indexOf(item) > -1 ? 'grey' : 'green'} />
                            <View style={{ position: 'absolute', bottom: 3 }}>
                                <Text style={{ fontSize: 10, textAlign: 'center', color: isSelected.indexOf(item) > -1 ? 'grey' : 'green' }}>{isSelected.indexOf(item) > -1 ? 'item \nAdded' : 'Add to\n Compare '}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                )}
            />
    )
}```

React Native：如何在不更改所有项目状态的情况下更新平面列表中的单个项目

1 个答案: