编译失败:未定义'movies‘(React)

Question

当我试图搜索一部电影并返回一组电影的响应时，我在react应用程序中收到了这个错误消息。

src/App.js
  Line 42:9:   'movies' is not defined  no-undef
  Line 42:19:  'movies' is not defined  no-undef

下面是src/App.js：

import React from 'react';
import './App.css';
import unirest from 'unirest';
import Movie from './movie';
import Search from './search';

class App extends React.Component {
  state = {
    movies: []
  }

 sendRequest = (title) => {

   const req = unirest("GET", "https://movie-database-imdb-alternative.p.rapidapi.com/");

   req.query({
     "page": "1",
     "r": "json",
     "s": title
   });

   req.headers({
    'x-rapidapi-host': 'movie-database-imdb-alternative.p.rapidapi.com',
    'x-rapidapi-key': 'my_api_key'
   });


   req.end((res) => {
     if (res.error) throw new Error(res.error);
     const movies = res.body.Search;
     this.setState({movies});

     console.log(res.body);
   });
 }

 render() {
   return (
     <div className="App">
       <header className="App-header">
       {
        movies && movies.length ? this.state.movies.map((movie) => {
          return <Movie {...movie}/>
        })
        : null
        }
         <Search handleSendRequest={this.sendRequest}/>
       </header>
     </div>
   );
 }
}

export default App;

我不知道为什么它说'movies‘是未定义的，我已经在类本身的开头将它设置为状态的一部分。由于某种原因，req.end函数似乎没有访问状态对象？

Answer 1

要么必须在render中展开状态，要么使用this.state.movies。

使用解构的

​

import React from 'react';
import './App.css';
import unirest from 'unirest';
import Movie from './movie';
import Search from './search';

class App extends React.Component {
  state = {
    movies: []
  }

 sendRequest = (title) => {

   const req = unirest("GET", "https://movie-database-imdb-alternative.p.rapidapi.com/");

   req.query({
     "page": "1",
     "r": "json",
     "s": title
   });

   req.headers({
    'x-rapidapi-host': 'movie-database-imdb-alternative.p.rapidapi.com',
    'x-rapidapi-key': 'my_api_key'
   });


   req.end((res) => {
     if (res.error) throw new Error(res.error);
     const movies = res.body.Search;
     this.setState({movies});

     console.log(res.body);
   });
 }

 render() {
   const {movies} = this.state; // Use Destructuring
   return (
     <div className="App">
       <header className="App-header">
       {
        movies && movies.length ? this.state.movies.map((movie) => {
          return <Movie {...movie}/>
        })
        : null
        }
         <Search handleSendRequest={this.sendRequest}/>
       </header>
     </div>
   );
 }
}

export default App;

​

或访问状态

​

import React from 'react';
import './App.css';
import unirest from 'unirest';
import Movie from './movie';
import Search from './search';

class App extends React.Component {
  state = {
    movies: []
  }

 sendRequest = (title) => {

   const req = unirest("GET", "https://movie-database-imdb-alternative.p.rapidapi.com/");

   req.query({
     "page": "1",
     "r": "json",
     "s": title
   });

   req.headers({
    'x-rapidapi-host': 'movie-database-imdb-alternative.p.rapidapi.com',
    'x-rapidapi-key': 'my_api_key'
   });


   req.end((res) => {
     if (res.error) throw new Error(res.error);
     const movies = res.body.Search;
     this.setState({movies});

     console.log(res.body);
   });
 }

 render() {
   return (
     <div className="App">
       <header className="App-header">
       { // Use this.state to access movies. 
        this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => {
          return <Movie {...movie}/>
        })
        : null
        }
         <Search handleSendRequest={this.sendRequest}/>
       </header>
     </div>
   );
 }
}

export default App;

​

编辑:修复未定义的res.body。

​

import React from 'react';
import './App.css';
import unirest from 'unirest';
import Movie from './movie';
import Search from './search';

class App extends React.Component {
  state = {
    movies: []
  }

 sendRequest = (title) => {

   const req = unirest("GET", "https://movie-database-imdb-alternative.p.rapidapi.com/");

   req.query({
     "page": "1",
     "r": "json",
     "s": title
   });

   req.headers({
    'x-rapidapi-host': 'movie-database-imdb-alternative.p.rapidapi.com',
    'x-rapidapi-key': 'my_api_key'
   });


   req.end((res) => {
     if (res.error) throw new Error(res.error);
     if(res && res.body && res.body.Search) {
       const movies = res.body.Search;
       this.setState({movies});
     }
     console.log(res.body);
   });
 }

 render() {
   return (
     <div className="App">
       <header className="App-header">
       {
        this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => {
          return <Movie {...movie}/>
        })
        : null
        }
         <Search handleSendRequest={this.sendRequest}/>
       </header>
     </div>
   );
 }
}

export default App;

​