gpt4 book ai didi

jquery - 学习使用 React 但我对如何合并 Promise 感到困惑

转载 作者:行者123 更新时间:2023-12-01 03:59:54 26 4
gpt4 key购买 nike

我了解 Promise 的工作原理,并且过去曾使用 JQuery 来实现 Promise。我正在构建一个非常简单的应用程序,它使用 YouTube API 来显示视频。我遇到了困难,因为我遇到了需要使用 Promise 但不知道如何使用的情况。

在我的 index.js 文件中,我定义了一个 App 类,该类的构造函数调用 API 来获取与默认搜索词“国家地理”匹配的视频列表。一旦这些结果返回(需要在此处使用 promise ),我想调用 this.setSelectedVideo 来播放特定的视频。

//  Node Modules
import React from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';

// Components
import SearchBar from './components/search_bar';
import VideoList from './components/video_list';
import VideoDetail from './components/video_detail';

const API_KEY_YOUTUBE = <MY_YOUTUBE_API_KEY>;

class App extends React.Component {

constructor(props) {
super(props);
this.state = {
videos: [],
selectedVideo: null
};

// initialize videos: finish this up when you learn how to do redux promises
this.videoSearch('National Geographic');
this.setSelectedVideo(this.state.videos[0]);
}

videoSearch(term) {
// Make AJAX request to YouTube for a list of videos matching term.
YTSearch({ key: API_KEY_YOUTUBE, term: term }, videos => {
this.setState({ videos: videos });
});
}

setSelectedVideo(video) {
// Make AJAX request to YouTube for the specific video being played.
console.log(video);
}

render() {
return (
<div>
<div className="row margin-bottom-md">
<div className="col-12 col-lg-8">
<SearchBar onSearchTrigger={ term => this.videoSearch(term) } />
</div>
</div>
<div className="row margin-bottom-md">
<div className="col-12 col-lg-8">
<VideoDetail video={ this.state.selectedVideo } />
</div>
<div className="col-12 col-lg-4">
<VideoList
videos={ this.state.videos }
onVideoSelect={ selectedVideo => this.setSelectedVideo({ selectedVideo }) }
selectedVideo={ this.state.selectedVideo }
/>
</div>
</div>
</div>
);
}

} // App class end

// Take this component's generated HTML and put it on the page.
ReactDOM.render(<App />, document.querySelector('#react-render'));

我一直在网上四处寻找并听到了一些选择。1. 我可以使用普通的 JS Promise。2. 我可以以某种方式将 JQuery 合并到我的应用程序中并使用它的 Promise 函数。不幸的是,听起来我需要包含一个来自 NPM 的单独的包管理器才能做到这一点?3.听说redux有promise功能。

这三个选项中哪一个是最好的/对我来说实现简单 promise 的最简单方法是什么?

最佳答案

未经测试,但这应该可以满足您的要求:

videoSearch(term) {
// Make AJAX request to YouTube for a list of videos matching term.
YTSearch({ key: API_KEY_YOUTUBE, term: term }, videos => {
this.setState({
videos: videos,
selectedVideo: videos[0]
});
});
}

来源:https://medium.com/@charlie.spencer/making-requests-to-the-youtube-api-with-react-fbd50fa8d77e

关于jquery - 学习使用 React 但我对如何合并 Promise 感到困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49722473/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com