REACT createContext与async函数返回axios数据

Question

我正在创建React上下文，但它返回一个承诺。在playlistcontext.js文件中，我有以下代码:

import React, { useEffect } from 'react';
import YouTube from '../services/youtube';
const playlistsData = YouTube.getPlaylists();
// console.log(playlistsData);
const PlaylistsDataContext = React.createContext(playlistsData);
const PlaylistsDataProvider = (props) => {

const [playlists, setPlaylists] = React.useState(playlistsData);
useEffect(() =>{
const playlistsData = YouTube.getPlaylists();
console.log(playlistsData);
setPlaylists(playlistsData);
},[])
return <PlaylistsDataContext.Provider value={[playlists, setPlaylists]}>{props.children}</PlaylistsDataContext.Provider>;
}
export {PlaylistsDataContext, PlaylistsDataProvider};

在youtube.js文件中，我像使用服务一样使用它，我有下面的代码。在这个函数中console.log(result.data)返回给我正确的数据。

import axios from 'axios';
import { YOUTUBE_API } from '../config/config';
function Youtube() {
const handleError = (resp) => {

let message = '';
switch (+resp.status) {
case 401:
message = resp.data.error;
break;
default:
message = 'general error';
}
return message;
}
const getPlaylists = async () => {
try {
const result = await axios.get(YOUTUBE_API + '');

return result.data;
} catch(e) {
return Promise.reject(handleError(e.response));
}

}
return {
getPlaylists
}
}
const ytMethod = Youtube();
export default ytMethod;

然后，我有一个container "tutorialcontainer。js"我在其中包装了一个组件:

import React, {useState} from 'react';
import { PlaylistsDataProvider } from '../containers/playlistscontext';
import Tutorials from '../components/tutorials';
const TutorialsContainer = (props) => {
return (
<PlaylistsDataProvider>
<Tutorials />
</PlaylistsDataProvider>
);
}
export default TutorialsContainer;

在最后一个文件tutorial .js中，我有这个组件。在这个文件中console.log(播放列表)返回给我一个承诺。

import React, {useState, useEffect} from 'react';
import SectionBoxPlaylist from '../components/html_elements/card_playlist';
import Header from '../components/header';
import { PlaylistsDataContext } from '../containers/playlistscontext';
const Tutorials = (props) => {
const [playlists, setPlaylists] = React.useContext(PlaylistsDataContext);
return (
<div className="app-container">
<Header />
<div className="section section-one text-center">
<div className="section-content">
<div className="section-box-items">
{   
Object.keys(playlists).map((item) => {
return <SectionBoxPlaylist key={item} id={item} info={playlists[item]} />
})
}
</div>
</div>
</div>
</div>
);
}
export default Tutorials;

你能帮我解释一下为什么吗?谢谢你！

Answer 1

setPlaylists紧接YouTube.getPlaylists()。

useEffect(() => {
const playlistsData = YouTube.getPlaylists();
console.log(playlistsData); // playlistsData is not fetched
setPlaylists(playlistsData);
},[])

您应该能够使用.then():

YouTube.getPlaylists().then(response => {
console.log(response);
setPlaylists(response);
});

您也可以在useEffect()中创建async函数:

useEffect(() => {
const getYTPlaylist = async () => {
const playlistsData = await YouTube.getPlaylists();
console.log(playlistsData);
setPlaylists(playlistsData);
}

getYTPlaylist();
},[])