reactjs - 未处理的拒绝(TypeError):this.state.movie.map 不是函数
问题描述
几个小时后,多次搜索并尝试自己更正我的代码,我无法让这个工作或找到任何关于我的具体问题的明确文档。任何帮助都感激不尽!
我正在尝试制作一个电影评级应用程序,但我已经快要结束了。但是,我现在要做的是从 API 显示我的信息。我有一个单独的组件“SearchForm.tsx”,它处理 API 调用后在 app.tsx 中调用的搜索字段为“+ SearchForm”,它应该等于 API 的查询。当我尝试输入文本并按回车键时,我被困在:
“未处理的拒绝(TypeError):this.state.movie.map 不是函数”。
该问题出现在我的 App.tsx 文件的第 46 行和第 27 行。
API 示例:
这是我试图显示“ https://api.themoviedb.org/3/search/movie?api_key=58db259ec7d41d210fee1d1dc69b6fca&query=home ”的地方
应用程序.tsx
import axios from "axios";
import * as React from "react";
import "./App.css";
import MoviesList from "./Components/MoviesList";
import SearchForm from "./Components/SearchForm";
export default class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
loading: true,
movie: []
};
this.handleSubmit = this.handleSubmit.bind(this);
}
public handleSubmit(value: any) {
// const searchInput = value; // you get the value of movieName input here
const sortByPop = "&sort_by=popularity.desc";
const requestUrl =
"https://api.themoviedb.org/3/search/movie?api_key=58db259ec7d41d210fee1d1dc69b6fca&query=" +
SearchForm +
sortByPop;
return axios.get(requestUrl).then(response => {
[27]err this.setState(
loading: false,
movie: response.data
});
// tslint:disable-next-line:no-console
console.log(response.data);
});
}
public render() {
return (
<div>
<div className="main-header">
<div className="inner">
<h1 className="main-title">Playpilot Assignment</h1>
<SearchForm onSubmit={this.handleSubmit} />
</div>
</div>
<div className="main-content">
[46]err {this.state.movie.map(movie => (
<div className="movieTitle">
<div className="movieCard">
<img
className="posterImg"
src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${
movie.poster_path
}`}
alt={movie.title}
/>
<div className="searchFilmTitles" key={movie.id}>
{movie.title}
</div>
</div>
</div>
))}
{this.state.loading ? (
<h2>Loading...</h2>
) : (
<MoviesList data={this.state.moviesList} />
)}
</div>
</div>
);
}
}
搜索表单.tsx
import * as React from "react";
export default class SearchForm extends React.Component<any, any> {
public value: HTMLInputElement | null;
constructor(props: any) {
super(props);
this.state = {
movie: []
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
public handleChange(event: any) {
this.setState({ value: event.target.value });
}
public handleSubmit(event: any) {
event.preventDefault();
if (this.props.onSubmit && typeof this.props.onSubmit === "function") {
this.props.onSubmit(this.state.value);
}
}
public render() {
return (
<form className="search-form" onSubmit={this.handleSubmit}>
<label className="is-hidden" htmlFor="search">
Search
</label>
<input
type="search"
onChange={this.handleChange}
name="search"
ref={input => (this.value = input)}
placeholder="Search..."
/>
<button type="submit" id="submit" className="search-button">
<i className="material-icons icn-search" />
</button>
</form>
);
}
}
电影列表.tsx
import * as React from "react";
import Movie from "./Movie";
const MoviesList = (props: any) => {
const results = props.data;
let movie: any;
[7]err if (results.data) {
// tslint:disable-next-line:no-shadowed-variable
movie = results.map((movie: any) => (
<Movie url={props.url} key={movie.id} />
));
} else {
movie = <h1>404: No movies found.</h1>;
}
return <ul className="movie-list">{movie}</ul>;
};
export default MoviesList;
再次感谢您的帮助!
解决方案
response.data
实际上不是一个数组,而是一个对象。将您的 api 调用更改为:
this.setState(
loading: false,
movie: response.data.results // results is the array you are looking for.
});
或者,也许更好,在渲染函数中映射结果:
{this.state.movie && this.state.movie.results.map(movie => (
...
))}
推荐阅读
- if-statement - If else 阶梯优化
- reactjs - 我无法在 react.js 中加载多个图像
- sql - 尝试在插入时创建触发器时出现多部分标识符错误
- xamarin.forms - Xamarin CollectionView - 以编程方式滚动
- angular - ngx-monaco-editor + Karma 测试运行器 - 如何将 monaco 实例加载到测试套件中?
- node.js - Mongoose,Next.JS OverwriteModelError:编译后无法覆盖模型
- abap - 迁移到 S4HANA 后,RIMARA20 程序中的 ALV 字段丢失
- deployment - Azure yaml 管道“预期的映射结束”
- c# - 使用 Fluent Validation 和 Entity Framework Core 构建通用验证器 - 基类中的类型问题
- python - 在字典中找到第 n 个最大值的键