如何将 React Native 中的状态保存到 Firebase

Question

我正在创建一个应用程序，允许用户从 Flatlist 中 select 多个项目，并且 state 更改一次 selected。但是，当我离开该屏幕时，所有 selected 项目都会回到 unselected 状态.如何使用 Firebase 保存 state 以便在我离开屏幕时它不会恢复？我也愿意接受这个问题的替代解决方案。

感谢您的宝贵时间。

export default function StoreCatalogue({ navigation }) {

    const { data, status } = useQuery('products', fetchProducts)

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

      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 clickHandler = 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 (
        <View style={styles.container}>

            <FlatList
                extraData={isSelected}
                keyExtractor={(item) => item.id}
                data={catalogueArray}
                renderItem={({ item }) => (
                    <TouchableOpacity style={styles.btn} onPress={() => { storeToDB(item); clickHandler(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>
    )
}

Answer 1

问题是当您离开屏幕时，状态会重置为原始状态，您可以使用 Redux 单独存储状态，并在事件中将信息存储在 firebase 上一次。

对于此操作，Firebase 的成本可能很高，因为每次读取和写入都需要付费。

如何将 React Native 中的状态保存到 Firebase

How to save State in React Native to Firebase

javascript

firebase

react-native

expo

asyncstorage