使用 React js 的 Youtube Data Api V3 显示先前获取的结果答案

【问题标题】：Youtube Data Api V3 using React js showing results of previous fetch使用 React js 的 Youtube Data Api V3 显示先前获取的结果
【发布时间】：2020-05-30 15:53:20
【问题描述】：

我正在制作一个 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

【问题讨论】：

标签： javascript reactjs axios youtube-api react-hooks

【解决方案1】：

您的console.log(posts) 步骤发生在setPosts(res.data.items) 之前。

要捕获posts 的更改，我建议使用useEffect 挂钩：

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

进一步了解useEffect here。

【讨论】：

【解决方案2】：

在 useEffect 钩子中添加 [query] 作为第二个参数。这意味着回调函数（useEffect 方法的第一个参数）在查询变量更改之前不会执行 ==> 我认为您必须更改 [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

【讨论】：