编译失败：未定义'movies'(反应)

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'是未定义的，我已经设置它作为状态的一部分在类本身的开始。这似乎是要求。由于某种原因，结束函数没有访问状态对象?

Answer 1

要么在渲染中扩展状态，要么使用this.state.movies。

使用Destructuring

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;