400 batRequest エラーがなおらない

Question

React勉強中です。
ユーチューブのapiを使って
動画を表示はできたのですが、

動画を選択しても画面に表示されず、
下記のエラーが検証ツールにて現れます

エラーをまとめたサイトを見たのですが、
同じようなエラーがない？
気がします
https://developers.google.com/youtube/v3/docs/errors?hl=ja

エラー文

xhr.js:184 GET https://www.googleapis.com/youtube/v3/videos?part=snippet&maxResult=40&key=AIzaSyD0-oEd_jWaq4JsmDJoFm0OFwUcdNmX_JU&regionCode=JP&type=video 400

createError.js:16 Uncaught (in promise) Error: Request failed with status code 400

apis/index


import axios from 'axios'


const KEY = 'AIzaSyD0-oEd_jWaq4JsmDJoFm0OFwUcdNmX_JU'

const youtube = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3' 　API
})

const params ={
  part: 'snippet',
  maxResult: 40,
  key:KEY,
  regionCode: 'JP',
  type: 'video',
}

export const fetchPopularDate = async () =>{
  return await youtube.get('/videos' ,{
    params: { 
      ...params,
      chart: 'mostPopular'
    }
  })
}

export const fetchSelectedDate = async (id) =>{
  return await youtube.get('videos', {
    params: { 
      ...params,
      id
    }
  })
}

export const fetchRelatedData = async (id) =>{　　データ輸送
  return await youtube.get('/search', {
    params: {
      ...params,
      relatedToVideoId: id
    }
  })
}
 export const fetchSearchData =async(query) =>{　　データ輸送
   return await youtube.get('/search',{
     params: {
       ...params,
       q: query
     }
   })
 }

Watch.js

import React,{useEffect,useContext} from 'react'
import Layout from '../components/Layout/Layout'
import VideoDetail from '../components/VideoDetail/VideoDetail'
import SideList from '../components/SideList/SideList'
import {Store} from '../store/index'
import {useLocation} from 'react-router-dom'
**import {fetchSelectedDate, fetchRelatedData} from '../apis/index'
**

const Watch = () => {
  const {setGlobalState} = useContext(Store)
  const location =useLocation()
  const setVideos = async () =>{
    const searchParams = new URLSearchParams(location.search)
    const id = searchParams.get('v')　データ取得？
   if(id){
      const [selected, related] = await Promise.all([fetchSelectedDate(id),fetchRelatedData(id)])
       setGlobalState({type: 'SET_SELECTED', payload: {selected: selected.data.items.shift()}})
       setGlobalState({type: 'SET_RELATED', payload: {related: related.data.items}})
    }
  }
  useEffect(() => {
   setVideos()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.search])
  return (
    <Layout>
      <VideoDetail />
      <SideList />
    </Layout>
  )
}

export default Watch

VideoDetail.js

import React,{useContext, useEffect} from 'react'
import {Store} from '../../store/index'
import VideoPlay from '../VideoPlay/VideoPlay'
import Styles from './VideoDetail.module.scss'
import Linkify from 'react-linkify';
import {useLocation} from 'react-router-dom'
import {**fetchSelectedDate}** from '../../apis/index'

const VideoDetail = () => {
  const {globalState,setGlobalState} = useContext(Store)
  const location = useLocation()
  const setSelectedVideo = async () =>{
    const searchParams = new URLSearchParams(location.search)
    const id = searchParams.get('v')　　データ取得？
    await fetchSelectedDate(id).then((res) =>{
      const item =res.data.items.shift()
      setGlobalState({type: 'SET_SELECTED', payload: {selected: item}})
    })
  }
  useEffect(() => {
    setSelectedVideo()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])

    return globalState.selected  && globalState.selected.id?(
    <div className={Styles.wrap}>　　　取得データの表示
      <VideoPlay id ={globalState.selected.id}/>
      <p>{globalState.selected.snippet.title}</p>
      <hr />
      <Linkify>
      <pre>{globalState.selected.snippet.description}</pre>
      </Linkify>
    </div>
  ) : (<span>no data</span>)
}

export default VideoDetail

VideoPlay.js　　　動画再生のためreact-youtube'インストール


import React from 'react'
import Youtube from 'react-youtube'
import Style from './VideoPlay.module.scss'

const VideoPlay = ({id}) =>{

  return (
    <div className={Style.wrap}>
      <Youtube className={Style.video} videoId ={id}/>
    </div>
  )
}

export default VideoPlay

Answer 1

<Link to = {{pathname: 'watch', search: `v=${id}`}} className={Style.item}>

に7が入ってしまっていました！

ご回答してくださった方ありがとうございます

Answer 2

/videosの公式リファレンスを参照しましたが、chart,id,myRatingのいずれか1つは必須のようです。

xhr.js:184 GET https://www.googleapis.com/youtube/v3/videos?part=snippet&maxResult=40&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&regionCode=JP&type=video 400

このエラーが発生したリクエスト時には上記のいずれも指定されていないように見えますが、それが原因ではないでしょうか？

Comments

[tomsuma]

失礼しました。

ありがとうございます！

[nekoniki]

いえいえ。
あと、私も失念していましたが、認証キーのような情報はマスクして記載した方がいいと思います。

[tomsuma]

ユーチューブAPI使うの初めてであまりわからないのですが、
ただいま画像を追加させてもらったのですが、
しっかりimportできているはずなのに
やはりエラーが出ます

[nekoniki]

> しっかりimportできているはずなのに
> やはりエラーが出ます
どういったエラーでしょうか？

[tomsuma]

ご返信ありがとうございます！
変わらず同じエラーです、、

[nekoniki]

であれば原因も同じだと思います。
apis/indexの各APIの実行処理で必須パラメータが足りているかを確認しましょう。