1
resposta

Como a filtrar os resultados? Erro ao chamar hook em OnPress

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 [parcerias, setParcerias] = useState([]);

    useEffect(() => {
        const carregaParcerias = async () => { 
            const resultado = await buscaParcerias(categoria)
            setParcerias(resultado)
        }
        carregaParcerias();
    }, [])

    return parcerias;
}

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

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

Só que aí está apresentando o erro: Object is not a function.

Código do buscaParcerias:

import api from "../api";

export async function buscaParcerias(categoria) {
    try {

        let resultado = []

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

        return resultado.data
    }
    catch (error) {
        console.log(error)
        return []
    }
}
1 resposta

Olá César!

Pelo que entendi, você está enfrentando um erro ao chamar o hook useParcerias no componente Categorias, correto? O erro "Object is not a function" geralmente ocorre quando você está tentando chamar uma função que não é uma função de fato.

Analisando o seu código, parece que o problema está na forma como você está utilizando o hook useParcerias. No componente Categorias, você está desestruturando o array retornado pelo hook e atribuindo-o à variável filtraParcerias. No entanto, o hook useParcerias retorna apenas um valor, que é o array de parcerias. Portanto, você não precisa desestruturar o array ao chamar o hook.

Para corrigir o erro, você pode simplesmente fazer a seguinte alteração no componente Categorias:

const filtraParcerias = useParcerias(); // Remova os colchetes []

// ...

<TouchableOpacity style={estilos.categoria} onPress={() => filtraParcerias(item.categoria)}>
    <Text>{item.categoria}</Text>
</TouchableOpacity>

Dessa forma, você estará atribuindo o array de parcerias retornado pelo hook useParcerias à variável filtraParcerias, sem a necessidade de desestruturar o array.

Espero que essa solução resolva o seu problema! Se você tiver mais alguma dúvida, é só perguntar. Estou aqui para ajudar. Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software