[React Native] Como atualizar um componente através de outro componente ?

React Native

10/10/2022

Tenho os componentes Categorias e Cards.

A página home chama os componentes:

 <View>
        <Search />
        <Categorias />
        <Cards />
</View>


Cards contém uma Flatlist como data (dados) = parcerias.

const parcerias = useParcerias();

Esse hook customizado fiz assim:

export default function useParcerias(categoria) {

    const carregaParcerias = async (categoria) => { 
        const resultado = await buscaParcerias(categoria);
        setParcerias(resultado);
    }

 return { parcerias, carregaParcerias };


No entando, o componente Categorias precisa filtrar as parcerias pela categoria. Deixei assim:

const [ filtraParcerias ] = useParcerias();
...
<TouchableOpacity style={estilos.categoria} onPress={() => carregaParcerias(item.categoria)}>
    <Text>{item.categoria}</Text>
</TouchableOpacity>
...


Só que aí quando clico na categoria não acontece nada em Cards, e se em Cards eu deixo assim:

useEffect( () => { 
        const carregaCategorias = async () => { 
            const resultado = await buscaCategorias()
            setCategorias(resultado)
        }
        carregaCategorias();
        carregaParcerias();
    }, [parcerias])

Aí entra em loop.

Código do buscaParcerias:

import api from "../api";

export async function buscaParcerias(categoria) {
    try {

        let resultado = []

        if (categoria){
            resultado =  await api.get(''/parcerias?tag='');
        } else {
            resultado = await api.get(''/parcerias'');
        }

        return resultado.data
    }
    catch (error) {
        console.log(error)
        return []
    }
}
Cesar Murilo

Cesar Murilo

Curtidas 0

Respostas

Cesar Murilo

Cesar Murilo

10/10/2022

Consegui fazer o que eu queria com API Context.
GOSTEI 0
POSTAR