React中未显式设置参数时Axios无法返回响应体问题

问题描述 #

使用Axios调用足球统计API时，动态传入league和season参数拼接URL，接口无法返回响应体；但直接把参数值（比如league=39&season=2022）硬编码到URL里就能正常获取响应。已确认props.league和props.season不为空，值来自父组件的按钮点击事件。

代码重现 #

Standings.js #

import React 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'>
        // 表格渲染代码
      </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}`,
    // 硬编码URL：`https://v3.football.api-sports.io/standings?league=39&season=2022` 可正常返回
    headers: {
      'x-rapidapi-host': 'v3.football.api-sports.io',
      'x-rapidapi-key': 'xxxxxxxxxxxxxxx'
    }
  };
      
  return axios(config)
}
    
export default getStandings

解决方案 #

1. 使用Axios的params配置替代URL拼接 #

手动拼接URL容易出现参数编码错误，Axios的params配置会自动处理参数编码和格式，是更可靠的方式：

async function getStandings(league, season) {
  let config = {
    method: 'GET',
    url: 'https://v3.football.api-sports.io/standings',
    params: {
      league: league,
      season: season
    },
    headers: {
      'x-rapidapi-host': 'v3.football.api-sports.io',
      'x-rapidapi-key': 'xxxxxxxxxxxxxxx'
    }
  };
      
  return axios(config)
}

2. 显式校验参数格式 #

确保传入的参数是API要求的数字/字符串格式，避免非预期的特殊字符：

async function getStandings(league, season) {
  // 强制转为数字后再转字符串，过滤无效格式
  const validLeague = Number(league).toString();
  const validSeason = Number(season).toString();
  
  let config = {
    method: 'GET',
    url: `https://v3.football.api-sports.io/standings?league=${validLeague}&season=${validSeason}`,
    headers: {
      'x-rapidapi-host': 'v3.football.api-sports.io',
      'x-rapidapi-key': 'xxxxxxxxxxxxxxx'
    }
  };
      
  return axios(config)
}

3. 添加错误捕获排查问题 #

在请求调用中加入错误处理，打印具体错误信息（比如参数错误、权限问题），定位问题根源：

// 修改Standings.js中的useEffect
useEffect(() => {
  getStandings(props.league, props.season)
    .then((response) => {
      setStandings(response.data.response[0].league.standings[0])                                          
    })
    .catch((error) => {
      console.error('请求失败详情:', error.response?.data || error.message);
      console.error('实际请求URL:', error.config?.url);
      console.error('传入参数:', { league: props.league, season: props.season });
    })       
}, [props.league, props.season]) // 优化依赖：只监听变化的参数，避免无效重复请求

4. 验证传入参数的实际值 #

在getStandings函数开头打印参数，确认值和类型是否符合预期：

async function getStandings(league, season) {
  console.log('league值:', league, '类型:', typeof league);
  console.log('season值:', season, '类型:', typeof season);
  // 后续请求代码
}

内容的提问来源于stack exchange，提问作者Bahaa Salaheldin