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.