Реагировать на компонент, используя fetch, не заполняя состояние из ответа - PullRequest
Новая
       5

Реагировать на компонент, используя fetch, не заполняя состояние из ответа

0 голосов
/ 29 марта 2020

Мой компонент извлекает некоторые данные с 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

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 29 марта 2020

Разве это не должно быть "Content-Type": "application/json"?

0 голосов
/ 29 марта 2020

Вы не установили значение по умолчанию youtubePlaylistItems в useState (), поэтому оно не определено.

Вы получаете ответ от Google API асинхронно с задержкой, но перед этим вы вызываете renderYoutubePlaylistItems и попробуйте вызвать карту из неопределенного.

Попробуйте установить какое-либо значение по умолчанию youtubePlaylistItems, например, использоватьState ([]).

Кроме того, вы уверены, что получаете массив из API? Проверьте, что вы получаете здесь response.json(). Возможно, что API возвращает некоторый объект с ошибкой, но статус ответа в порядке.

0 голосов
/ 29 марта 2020

Я думаю, что вам не хватает обертки на вашем возвращении, попробуйте что-то вроде этого:

Сначала добавьте это в ваш импорт: 

import React, {useState, useEffect, Fragment} from "react"

И оберните ваше возвращение, что-то вроде это: 

return (
   <Fragment>
        {renderYoutubePlaylistItems(youtubePlaylistItems)}
   </Fragment>
    )

Надеюсь, это поможет!

...