Axios doesn't return response body if I don't set parameters explicitly in reactjs-CodePudding

I use api to get football statistics using axios which take an object as a paramater. The object contains some information like endpoint url and headers. If I pass values to url parameters, it will not return data body. But If I set it explicitly it will do. I to convert values to string but it didn't work too. (Look at getStandings function below)

Update: props.league and props.season are not null, they get their values from clicked buttons in App.js.

Standings.js

import React,{ ReactDOM } from 'react'
import { useState, useEffect } from 'react'
import getStandings from '../api/getStandings'

function Standings(props) {
  const [standings, setStandings] = useState([])

  useEffect(() => {
    getStandings(props.league, props.season)
      .then((response) => {
        setStandings(response.data.response[0].league.standings[0])                                          
      })       
  }, [props])
   
  return (
    <div>
      <table className='table table-hover'>
        // some html code
      </table>
    </div>
  )
}

export default Standings

getStandings.js

 import axios from 'axios'

 async function getStandings(league, season) {
   let config = {
     method: 'GET',
     url: `https://v3.football.api-sports.io/standings?league=${league}&season=${season}`,
     // If I write `https://v3.football.api-sports.io/standings?league=39&season=2022` it will return response body
     headers: {
       'x-rapidapi-host': 'v3.football.api-sports.io',
       'x-rapidapi-key': 'xxxxxxxxxxxxxxx'
     }
   };
      
   return axios(config)
 }
    
 export default getStandings

CodePudding user response：

I don't think there's anything wrong with your api function. If I were you, I would try print props and see what's in there first.

ex)

import React,{ ReactDOM } from 'react'
import { useState,useEffect } from 'react'
import getStandings from '../api/getStandings'


function Standings(props){
console.log('props', props)       <--- print props
const [standings,setStandings]=useState([])

    useEffect(()=>{
       
            getStandings(props.league,props.season).then((response)=>{
                setStandings( response.data.response[0].league.standings[0] )                                          
            })       
            
        
        
    },[props])

   
    return(
        <div>
            <table className='table table-hover'>
                // some html code
            </table>
        </div>
    )
}

export default Standings

CodePudding user response：

use the optional operator to prevent the undefined issues, also don't use the props object as a dependency in the useEffect hook instead use props.league and props.season due to the useEffect shallow comparison. so here is my solution it might seem helpful:

import React,{ ReactDOM } from 'react'
import { useState,useEffect } from 'react'
import getStandings from '../api/getStandings'

function Standings(props){
const [standings,setStandings]=useState([]);
    useEffect(()=>{
            getStandings(props.league,props.season).then((response)=>{
                setStandings( response.data?.response[0]?.league?.standings[0] )                                          
            })       
    },[props.league, props.season])

   
    return(
        <div>
            <table className='table table-hover'>
                // some html code
            </table>
        </div>
    )
}

export default Standings;

CodePudding user response：

Ok, it was my mistake, season paramater's value was not the right value, so it return empty response. Thank you for your help