通过props将API请求参数从子节点传递给父节点

Question

我有2个Api请求，其中一个挂在孩子-从它，当我点击图片，我得到轨道键，并把它在第二个Api请求的父作为参数，以便它显示我需要的信息。但是当我将它输出到控制台时，我得到一个空消息=(

)结果console.log

import React from 'react'
import { AppContext } from '../MainContent'
import TrackTranding from './TrackTranding'
const ContentTrending = ({ onClick }) => {
const { articles, setArticles } = React.useContext(AppContext)
const handleClick = (e) => {
e.preventDefault();
onClick(articles[e.target.dataset.attr].key) // get key from first api
}
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, index) => {
return (
<div className='one' key={tracks.key}
onClick={handleClick}
>
<TrackTranding
tracks={tracks}
index={index}
/>
<audio src="#" id="audioTrack"></audio>
</div>
)
})
}
</div>
</div>
</div>
)
}
export default ContentTrending

父母

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([])
const [name, setName] = React.useState('');
const handleClick = (name) => {
setName(name)
console.log(detailse) // --------------------------- error =()
}
const fetchData = () => {
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 => {
const tracksApi = data.data.tracks
setArticles(tracksApi)
})
const details = {
method: 'GET',
url: 'https://shazam.p.rapidapi.com/songs/get-details',
params: { key: { name }, locale: 'en-US' }, // ---------------------------------- param
headers: {
'X-RapidAPI-Key': '10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88',
'X-RapidAPI-Host': 'shazam.p.rapidapi.com'
}
};
axios.request(details).then(data => {
const tracksDetails = data.data
setDetailse(tracksDetails)
})
}
React.useEffect(() => {
fetchData()
}, []);
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

Answer 1

当前您在组件首次挂载时调用fetchData,name状态设置为空字符串""。

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

你在details中传递的对象基本上是这样的:

const details = {
method: "GET",
url: "https://shazam.p.rapidapi.com/songs/get-details",
params: { key: { name: "" }, locale: "en-US" }, // notice the empty string
headers: {
"X-RapidAPI-Key": "10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88",
"X-RapidAPI-Host": "shazam.p.rapidapi.com",
},
};

相反，你可以做的是当name变化时触发useEffect。现在，handleClick和Child的name将得到更新。

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

你可能想改变，目前你正在设置key对象与另一个名为name的道具。

params: { key: { name }, locale: 'en-US' }

to，这将确保keyprop的值来自name

params: { key: name, locale: 'en-US' }