未处理的拒绝（TypeError）：无法读取未定义的属性“ items”

Question

我一直在使用Youtube-API，但我不知道为什么会发生此错误。

我已经查找未经处理的拒绝，并且我理解了什么意思。但是我解决不了 这个问题呢。

我使用的材料

• 反应

• material-Ui

  您能确认我的错误吗？

App.js

import React from 'react';
import { Grid } from '@material-ui/core';
import   SearchBar  from './components/SearchBar/SearchBar';
import   VideoList  from './components/VideoList';
import  VideoDetail  from './components/VideoDetail/VideoDetail';

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:'Youtube api',
        q: searchTerm,
      }
    });
    this.setState({video: 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;

---

这是屏幕截图。

Answer 1

在您要设置状态的这一行中有一个错误

this.setState（{video：response.date.items，selectedVideo：response.data.items [0]}）

您应该使用response.data.items ....而不是使用response.date.items 将“日期”替换为“数据”。