React子组件向父组件传API请求参数时控制台输出为空问题

核心问题总结 #

1. 初始化时就调用了详情API，但此时name为空，请求无效；点击事件触发后没有重新发起详情API请求
2. 点击事件中直接打印detailse，但setState是异步操作，且未触发新的API请求，所以始终为空
3. 子组件点击事件中获取track key的方式错误，没有正确绑定索引数据，且事件目标可能不准确
4. 详情API的参数格式错误，key传了对象而非字符串

分步修复 #

1. 修复子组件的点击事件，正确传递track key

不用通过e.target间接获取索引，直接在遍历的时候把当前track的key传给点击事件，避免事件冒泡导致的目标元素错误：

// CHILD组件修改
import React from 'react'
import { AppContext } from '../MainContent'
import TrackTranding from './TrackTranding'
const ContentTrending = ({ onClick }) => {
  const { articles } = React.useContext(AppContext)
  
  const handleClick = (trackKey) => {
    onClick(trackKey)
  }

  return (
    <div className="main__content-trending">
      <p>Tranding right now</p>
      <div className="noflex-oneblock">
        <div className="main__content-trending-artist-title ">
          {
            articles.map((tracks) => {
              return (
                <div className='one' key={tracks.key}
                  onClick={() => handleClick(tracks.key)}
                >
                  <TrackTranding
                    tracks={tracks}
                  />
                  <audio src="#" id="audioTrack"></audio>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
export default ContentTrending

2. 父组件调整API调用逻辑，点击后触发详情请求

把获取榜单和获取详情的逻辑拆分，点击事件触发后直接调用详情API，同时修正参数格式：

// PARENT组件修改
import axios from 'axios'
import React from 'react'
import MainContentBg from './MainBcg/ContentBg'
import MainContentTitle from './MainTitle/ContentTitle'
import ContentTrending from './MainTrending/ContentTrending'
export const AppContext = React.createContext()

const MainContent = () => {
    const [articles, setArticles] = React.useState([])
    const [detailse, setDetailse] = React.useState(null)
    const [name, setName] = React.useState('');

    // 获取榜单数据
    const fetchChartData = () => {
        const chart = {
            method: 'GET',
            url: 'https://shazam.p.rapidapi.com/charts/track',
            params: { locale: 'en-US', pageSize: '20', startFrom: '0' },
            headers: {
                'X-RapidAPI-Key': '10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88',
                'X-RapidAPI-Host': 'shazam.p.rapidapi.com'
            }
        };
        axios.request(chart).then(data => {
            setArticles(data.data.tracks)
        })
    }

    // 获取单首歌曲详情
    const fetchTrackDetails = (trackKey) => {
        const details = {
            method: 'GET',
            url: 'https://shazam.p.rapidapi.com/songs/get-details',
            params: { key: trackKey, locale: 'en-US' }, // 修正参数格式，直接传字符串key
            headers: {
                'X-RapidAPI-Key': '10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88',
                'X-RapidAPI-Host': 'shazam.p.rapidapi.com'
            }
        };
        axios.request(details).then(data => {
            setDetailse(data.data)
            console.log(data.data) // 请求成功后再打印详情
        }).catch(err => {
            console.error('获取歌曲详情失败:', err) // 增加错误捕获
        })
    }

    const handleClick = (trackKey) => {
        setName(trackKey)
        fetchTrackDetails(trackKey) // 点击后立即触发详情请求
    }

    React.useEffect(() => {
        fetchChartData()
    }, []);

    return (
        <main className="main">
            <div className="main__content">
                <AppContext.Provider value={{ articles, setArticles }}>
                    <MainContentTitle />
                    <MainContentBg />
                    <ContentTrending onClick={handleClick} />
                </AppContext.Provider>
            </div>
        </main>
    )
}
export default MainContent

3. 额外优化建议

• 给detailse设初始值null，方便区分未请求、请求中、请求完成的状态
• 可以添加loading状态，避免重复点击触发多次API请求
• 始终保留错误捕获逻辑，快速排查API调用失败的原因

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