reactjs - react native swr for firebase got error Rendered more hooks than during the previous render

Question

I use swr firestore to get data from firestore:

this is my code:

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
    }
});

but I got error: Rendered more hooks than during the previous render

The idea is I want to get data from firestore use swr firestore and set that data to setData so I can manipulate data if there are any event and change.

but before that, I must get current merchant from asyncstorage.

how to solve this? I still confuse how to use hooks properly

question from:https://stackoverflow.com/questions/66062223/react-native-swr-for-firebase-got-error-rendered-more-hooks-than-during-the-prev

Answer 1

Waitting for answers