Question

编译失败：未定义“movies”（React）

2021-09-23

228

javascript reactjs undefined

当我试图搜索电影并返回一系列电影的响应时，我正在在React应用中获取此错误消息。

335310810

是src/app.js：

494268073

我不确定为什么它在说“电影”不确定，我将其设置为状态的一部分班级本身。似乎由于某种原因，req.end函数无法访问状态对象？

Answer 1

要么您必须在渲染中传播状态，要么使用 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;