Youtube Data API V3 使用 React js 显示之前获取的结果

Question

我正在制作一个youtube克隆，用户可以在其中搜索一个术语，youtube数据API将在react js中显示所需的结果，但每次我查询时都会显示上一个查询的数据。 当我记录"发布"即 JSON 数据时

**搜索查询组件*

import React,{useEffect,useState} from 'react'
import axios from 'axios'
import Cards from './Cards'
function SearchResults(props) {
const query = props.match.params.query;
const [posts, setPosts] = useState([])
useEffect(() => {
axios({
"method": "GET",
"url": 'https://www.googleapis.com/youtube/v3/search',
"params":{
'part':'snippet',
'maxResults':'20',
'key':'[API_KEY]',
'q':query
}
})
.then((res) => {
setPosts(res.data.items)               
})
.catch((error) => {
console.log(error)
})
console.log(posts); 
},[query])
return (
<div>
<Cards/>
</div>
)
}
export default SearchResults

Answer 1

您的console.log(posts)步骤比setPosts(res.data.items)步骤更早发生。

为了捕获posts更改，我建议使用useEffect钩子作为：

useEffect(() => {
console.log(posts); 
}, [posts]);

在此处阅读有关useEffect的更多信息。

Answer 2

在useEffect钩子中，您需要添加[query]作为第二个参数。这意味着回调函数(useEffect方法的第一个参数(在变量更改之前不会执行query==>我认为您必须通过[posts]更改[query]。

只需使用此代码：

import React,{useEffect,useState} from 'react'
import axios from 'axios'
import Cards from './Cards'
function SearchResults(props) {
const query = props.match.params.query;
const [posts, setPosts] = useState([])
useEffect(() => {
axios({
"method": "GET",
"url": 'https://www.googleapis.com/youtube/v3/search',
"params":{
'part':'snippet',
'maxResults':'20',
'key':'[API_KEY]',
'q':query
}
})
.then((res) => {
setPosts(res.data.items)               
})
.catch((error) => {
console.log(error)
})
console.log(posts); 
},[posts])
return (
<div>
<Cards/>
</div>
)
}
export default SearchResults