javascript - 使用提取来 react 组件不会从响应中填充状态

我的组件从YouTube提取了一些数据，然后将其返回到页面-问题是youtubePlaylistItems没有填充。

当我尝试将renderYoutubePlaylistItems移至访存时，收到关于组件未返回任何内容的错误消息，如果我添加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

提前致谢。

最佳答案

您未在useState（）中设置youtubePlaylistItems的默认值，这就是未定义默认值的原因。

您会延迟接收来自Google API的异步响应，但在此之前，您调用renderYoutubePlaylistItems并尝试从未定义中调用map。

尝试设置一些默认值youtubePlaylistItems，例如useState（[]）。

另外，您确定从API获取数组吗？检查您在这里得到什么response.json()。 API可能返回了一些带错误的对象，但响应状态正常。

关于javascript - 使用提取来 react 组件不会从响应中填充状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60907384/