时间戳

首页 > 解决方案 > 使用 fetch 的 React 组件不从响应中填充状态

javascript - 使用 fetch 的 React 组件不从响应中填充状态

问题描述

我的组件在将其返回到页面之前从 YouTube 获取一些数据 - 问题youtubePlaylistItems是没有填充。

当我尝试renderYoutubePlaylistItems进入 fetch 时，我收到一个关于组件没有返回任何内容的错误，如果我添加 return null 我什么也得不到。

就目前而言，我收到一个关于youtubePlaylistItems.map不是函数的错误。

我已经到了一个地步，我想我会在这里问，因为谷歌让我失望了。

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

提前致谢。

标签： javascriptreactjsfetch

解决方案

不应该"Content-Type": "application/json"吗？

推荐阅读