Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

I am tryng to use an api to get data, but the async function its not wroking

$
0
0

i am tryng to get the data on the main file of a react-native aplication, so i can manipulate it and use it to create the app, but i dont know wath i am doing wrong. Let me explain:

The Api its working, normaly, i did the "get method" whit axios in the file "APP.tsx and it returned what i wanted, i also tryed request with insominia. Then i thougth it wold be a better idea to separe in a diferent file, because i have the intention to create several calls from other requests, and possible from others api's. Then i did this:

this is the App.tsx file resumed without the components:

        import { StatusBar } from 'expo-status-bar';        import { StyleSheet, View, Text } from 'react-native';        import React, { useEffect, useState } from 'react';        import Header from './src/components/header/Header';        import { GamesToUseProps } from './src/services/getGames/apiGetGamesData';        import {useGames}  from './src/services/getGames/apiGetGamesData';        export default function App() {        const [games, setGames] = useState<GamesToUseProps[] | null>(null);        const [test, setTest] = useState('asc');        useEffect(() => {            const fetchData = async () => {            setTest('teste');            const gamesData = await useGames();            setGames(gamesData);            };            fetchData();        }, []);        return (        )        }

Then i created i this (.ts) file to manipulate the data that come from the api:

        import { useState } from 'react'; import { setupApiGames } from '../setupApi';        export interface Game { fixture_id: string; event_timestamp: string; event_date: string; league_id: string; round: string; homeTeam_id: string; awayTeam_id: string; homeTeam: string; awayTeam: string; status: string; statusShort: string; goalsHomeTeam: string | null; goalsAwayTeam: string | null; halftime_score: string | null; final_score: string | null; penalty: string; elapsed: string; firstHalfStart: string; secondHalfStart: string; }        export interface GamesToUseProps { fixture_id: string; event_timestamp: string; event_date: string; league_id: string; round: string; homeTeam_id: string; awayTeam_id: string; homeTeamLogo: string; homeTeam: string; awayTeamLogo: string; awayTeam: string; status: string; statusShort: string; goalsHomeTeam: string | null; goalsAwayTeam: string | null; halftime_score: string | null; final_score: string | null; penalty: string; elapsed: string; firstHalfStart: string; secondHalfStart: string; }        export function useGames(): GamesToUseProps[] { const [games, setGames] = useState<Game[]>([]); const [gamesToUse, setGamesToUse] = useState<GamesToUseProps[]>([]);        async function getGames() {        try {        const apiGames = setupApiGames();        const response = await apiGames?.get('/v2/fixtures/league/524/next/10');        setGames(response?.data);        } catch (error) {        console.log("Erro ao tentar acessar os dados da API " + error);        }        } getGames;        if(games) { const data = games.map(game => ({ fixture_id: game.fixture_id, event_timestamp: game.event_timestamp, event_date: game.event_date, league_id: game.league_id, round: game.round, homeTeam_id: game.homeTeam_id, awayTeam_id: game.awayTeam_id, homeTeamLogo: https://media.api-sports.io/football/teams/${game.homeTeam_id}.png, homeTeam: game.homeTeam, awayTeamLogo: https://media.api-sports.io/football/teams/${game.awayTeam_id}.png, awayTeam: game.awayTeam, status: game.status, statusShort: game.statusShort, goalsHomeTeam: game.goalsHomeTeam, goalsAwayTeam: game.goalsAwayTeam, halftime_score: game.halftime_score, final_score: game.final_score, penalty: game.penalty, elapsed: game.elapsed, firstHalfStart: game.firstHalfStart, secondHalfStart: game.secondHalfStart, }));        setGamesToUse(data);        }        return gamesToUse;        }

so i use this two other files (.ts) to set the api configuration:

i have the intention to use this one help me to get things more easy when i have more requests.

        import { getGames } from './apiGetData';        export function setupApiGames() { const apiGames = getGames();        return apiGames;        }        // export function setupApiTeams() {        //     const apiTeams = getTeams();        //     return apiTeams; // }

this one it is the main one, whith the configuration from axios:

        import axios from "axios";        export function getGames() {        try {            const apiGames = axios.create({                baseURL: 'https://api-football-v1.p.rapidapi.com/',                headers: {'X-RapidAPI-Key': 'keyHere','X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'                }            })            return apiGames;        } catch (error) {            console.log(error +"Erro ao tentar acessar os dados da API");        }        }

So, i tryed to debug, searched and web and a dont know whats its happening, i only noticed that the async function on the file App.tsx its not getting the data. everything that cames after "const gamesData = await useGames(), kind that donsent work, its kind it is waiting for ever, and never get it. i hope you cold help me, i also that you could be a litte comprehnsive too, i am a inexperient programmer tryng to become a relevant. i alredy thank for your attention and help and also, sorry for my english.


Viewing all articles
Browse latest Browse all 6290

Trending Articles