为 firebase 反应原生 swr 出错 渲染的钩子比上一次渲染时更多

Question

我使用 swr firestore 从 firestore 获取数据：

这是我的代码：

import { Divider } from '@ui-kitten/components';
import React, { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, Text } from 'react-native';
import { useCollection } from '@nandorojo/swr-firestore'
import { NavigationBar } from '../common';
import { SafeAreaView } from 'react-native-safe-area-context';
import { GetCurrentMerchantId } from '../../data/storage';

import { FoodMenuListTemplate } from "../templates";

export default function FoodMenuSelector({ navigation, route }) {
    const [merchantId, setMerchantId] = useState('');
    const [data, setData] = useState([]);
    const { data: dataFromServer, error } = useCollection(`FoodMenus`, {
        where: ['merchantId', '==', merchantId],
        listen: true
    })


    if (error) return <Text>Error!</Text>
    if (!dataFromServer) return <Text>Loading...</Text>

    useEffect(() => {
        const setMerchantById = async () => {
            const currentMerchantId = await GetCurrentMerchantId();
            setMerchantId(currentMerchantId);
        }
        setMerchantById();
    }, []);

    setData(dataFromServer);



    const onItemPress = (selectedItem) => {
        selectedItem.selected = !selectedItem.selected;
        const filtered = data.filter(item => item.id != selectedItem.id);
        filtered.push(selectedItem);
        setData(filtered);
    }

    return (
        <SafeAreaView
            insets='top'>
            <NavigationBar
                title={'Food Menu'}
                subtitle={'Select food menu'}
                hasBack={true}
                onSave={() => {
                    route.params.onMenusSelected(data.filter(item => item.selected));
                    navigation.goBack();
                }} />
            <Divider />
            <ScrollView style={styles.container}>
                {data.length == 0 ?
                    <Text style={{ textAlign: 'center', marginTop: 50 }}>No Food Menu Found, Create one ...</Text>
                    : <FoodMenuListTemplate data={data} onItemPress={onItemPress} />}
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        margin: 10
    }
});

但出现错误：Rendered more hooks than during the previous render

这个想法是我想从 firestore use swr firestore 获取数据并将该数据设置为 setData，这样我就可以在发生任何事件和更改时操作数据。

但在此之前，我必须从 asyncstorage 获取当前商家。

如何解决这个问题？我仍然困惑如何正确使用钩子