我的组件从 YouTube 获取一些数据，然后将其返回到页面 - 问题是 youtubePlaylistItems 未填充。
当我尝试将 renderYoutubePlaylistItems 移动到 fetch 中时，我收到一个错误，表明组件没有返回任何内容，如果我添加 return null，我什么也得不到。
就目前情况而言，我收到一条关于 youtubePlaylistItems.map 不是函数的错误。
我已经到了我想在这里提问的地步，因为 Google 让我失望了。
import React, {useState, useEffect} from "react"
const FetchYoutubePlaylist = (props) => {
const [youtubePlaylistItems, setYoutubePlaylistItems] = useState([])
useEffect(() => {
let endpoint = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=" + props.maxResults + "&playlistId=" + props.playlistID + "&key=" + process.env.GATSBY_YOUTUBE_API_KEY
fetch(endpoint, {
"METHOD": "GET",
"Content-Type": "application/json"
})
.then((response) => {
// console.log(response)
return response.json()
})
.then((json) => {
// console.log(json)
setYoutubePlaylistItems(json)
})
.catch((error) => {
console.log("There was an error: " + error)
})
}, [props.maxResults, props.playlistID])
return (
renderYoutubePlaylistItems(youtubePlaylistItems)
)
}
const renderYoutubePlaylistItems = (youtubePlaylistItems) => {
let videos = youtubePlaylistItems.map( function(video, index) {
return <li key={index}>{video.items.snippet.title}</li>
})
return (
<ul>
{videos}
</ul>
)
}
export default FetchYoutubePlaylist提前致谢。
最佳答案
不应该是"Content-Type": "application/json"吗？
关于javascript - 使用 fetch 的 React 组件不会从响应中填充状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60907384/