未处理的拒绝（TypeError）：this.state.movi​​e.map不是函数

Question

经过几个小时，多次搜索并尝试自行更正我的代码，我无法正常工作或找到有关我具体问题的明确文档。任何帮助将不胜感激！

我正在尝试制作一部电影评级应用，而且我已经差不多完成了。但是，我现在要做的是从API显示我的信息。我有一个单独的组件“SearchForm.tsx”，它处理在API调用后在app.tsx中调用的搜索字段“+ SearchForm”，它应该等于API的查询。当我尝试输入文本并点击返回时，我会卡在：

“未处理的拒绝（TypeError）：this.state.movi​​e.map不是函数”。

问题出现在我的App.tsx文件第46和27行。

API示例：

这是我试图显示“https://api.themoviedb.org/3/search/movie?api_key=58db259ec7d41d210fee1d1dc69b6fca&query=home”

的地方

App.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>
    );
  }
}

SearchForm.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>
    );
  }
}

MoviesList.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;

再次感谢您的帮助！

Answer 1

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 => ( 
    ...
))}