javascript - 未捕获的 TypeError : this. state.map 不是函数

Question

在 React 中，我使用 Axios 映射一个数组以输出从 MovieDB API 中提取的电影名称列表。它连接到 MovieDB 很好，但是，我在控制台中收到以下错误:

Uncaught TypeError: this.state.movies.map is not a function

我相信这会阻止电影列表输出到浏览器。

Codesandbox 链接是 here .

这是代码所在的 SearchBar 组件:

    import React, { Component } from "react";
    import TextField from "@material-ui/core/TextField";
    import axios from "axios";

    import "../SearchBar/_search-bar.scss";

    class SearchBar extends Component {
      state = {
        userSearchTerm: "",
        movies: []
      };

      // When user types, match the value to state
      onInputChange = e => {
        this.setState({ userSearchTerm: e.target.value });
      };

      // On submitting the input, grab the API
      onInputSubmit = e => {
        e.preventDefault();

        const movieName = this.state.userSearchTerm;
        const KEY = "XXXXXXXXXX";

        const searchQuery = `https://api.themoviedb.org/3/search/movie?api_key=${KEY}&language=en-US&query=${movieName}&page=10`;

        axios.get(searchQuery).then(res => {
          this.setState({ movies: res.data });
        });
      };

      render() {
        return (
          <div>
            <form onSubmit={this.onInputSubmit}>
              <TextField
                label="Search for a movie and hit enter..."
                margin="normal"
                className="search-bar"
                onChange={this.onInputChange}
              />
            </form>
            <ul>
              {this.state.movies.map(movie => (
                <li key={movie.id}>{movie.results.title}</li>
              ))}
            </ul>
          </div>
        );
      }
    }

    export default SearchBar;

顺便说一下，我测试了相同的代码，但使用了不同的 API，并且效果很好。 API本身或this.state.movi​​es.map有问题吗？

Answer 1

您正在使用的 API 返回一个对象，其中“结果”是您要查找的键。如果您将 setState 更新为 this.setState({ movie: res.data.results }); 您应该得到您正在寻找的内容。

Axios Response Schema

作为旁注，我会用类似 {Array.isArray(this.state.movi​​es) && this.state.movi​​es.map(movie => (...仅当 movies 设置为状态且为数组时，这才会有条件地渲染输出。