Question

我正在使用Google API开发Web应用程序并从Youtube获取数据。该错误似乎没有发生，但无法获取数据。

我正在使用数据 -YouTube数据API（我确实重新发布了API ）

这是我的SearchBar.js

import React from 'react';

import { Paper, TextField } from '@material-ui/core';

class SearchBar extends React.Component {
  state = {
    searchTerm: '',
  }

  handleChange =(event) => this.setState ({searchTerm: event.target.value});
  
  handleSubmit =(event) => {
    const {searchTerm} = this.state;
    const {onFormSubmit} = this.props;
     

    onFormSubmit(searchTerm);

    event.preventdefault();

  }

  render(){
    return (
      // <h1>This is a serach component</h1>
      <Paper elevation={6} style={ {padding: '25px' }}>        
        <form onSubmit={this.handleSubmit}>
          <TextField fullWidth label="Search..." onChange={this.handleChange}/>
        </form>
      </Paper>
    )
  }
}

export default SearchBar;

这是我的VideoDetail.js

import React from 'react';

import { Paper, Typography } from '@material-ui/core';


const VideoDetail = ({ video }) => {
if(!video) return <div>Loading...</div>


  const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;
  return(
   <React.Fragment>
     <Paper elevation={6} style={{height: '70%'}}>
      <iframe frameBorder="0" height="100%" width="100%" title="Video Player" src={videoSrc}/>
  <Typography variant="h4">{video.snippet.title} - {video.snippet.channelTitle}</Typography>
      <Typography variant="subtitle1">{video.snippet.channeltitle}</Typography>
      <Typography variant="subtitle2">{video.snippet.description}</Typography>

    </Paper>
     <Paper elevation={6} style={{padding: '15px'}}>

     </Paper>
   </React.Fragment>
  )
} 

export default VideoDetail;

这是我的App.js

import React from 'react';

import { Grid } from '@material-ui/core';

import  { SearchBar, VideoDetail, VideoList } from './components';
import youtube from './api/youtube';

class App extends React.Component {
   
  state = {
    video: [],
    selectedVideo: null
  }

  handleSubmit = async (searchTerm) => {
    const response = await youtube.get('search', {
      params: {
        part: 'snippet',
        maxResults: 5,
        key:'api key',
        q: searchTerm,
      }
    });
    this.setState({videos: response.date.items, selectedVideo: response.data.items[0]});
  }
  

  
  render (){
    const {selectedVideo} = this.state;
    return(
     <Grid justify="center" container spacing={10}>
       <Grid item  xs={11}>
         <Grid container spacing={10}>
          <Grid item xs={12}>      
            <SearchBar onFormSubmit={this.handleSubmit}/>
          </Grid>
          <Grid item xs={8}>
            <VideoDetail video={selectedVideo}/>
          </Grid>
          <Grid item xs={4}>
            <VideoList />
          </Grid>
         </Grid>
       </Grid>
     </Grid>
    );
  }
}
export default App;

这是我的index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";


ReactDOM.render(<App />, document.querySelector("#root"));

enter image description here

这是我以表格形式输入关键字句子但不起作用时的图片

无法在Reactjs中获取YouTube数据

0 个答案: