Javascript 未捕获类型错误：this.state.map不是函数

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

未捕获类型错误：this.state.movies.map不是函数

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

代码沙盒链接是

下面是代码所在的搜索栏组件：

    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;

import React，{Component}来自“React”；
从“@material ui/core/TextField”导入TextField；
从“axios”导入axios；
导入“./SearchBar/_search-bar.scss”；
类搜索栏扩展组件{
状态={
userSearchTerm:“”，
电影：[]
};
//当用户键入时，将值与状态匹配
onInputChange=e=>{
this.setState（{userSearchTerm:e.target.value}）；
};
//提交输入时，获取API
onInputSubmit=e=>{
e、 预防默认值（）；
const movieName=this.state.userSearchTerm；
const KEY=“xxxxxxxxx”；
常量搜索查询=`https://api.themoviedb.org/3/search/movie?api_key=${KEY}&language=en-US&query=${movieName}&page=10`；
get（searchQuery）.then（res=>{
this.setState（{movies:res.data}）；
});
};
render（）{
返回(

{this.state.movies.map（movie=>(
{movie.results.title}
))}

);
}
}
导出默认搜索栏；

另一方面，我测试了相同的代码，但使用了不同的API，效果很好。API本身或this.state.movies.map是否有问题？

工作代码：

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 = "XXXXXX";

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

    axios.get(searchQuery).then(res => {
      console.log("res is ------", res)
      this.setState({ movies: res.data.results });
    });
  };

  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.original_title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default SearchBar;

import React，{Component}来自“React”；
从“@material ui/core/TextField”导入TextField；
从“axios”导入axios；
导入“./SearchBar/_search-bar.scss”；
类搜索栏扩展组件{
状态={
userSearchTerm:“”，
电影：[]
};
//当用户键入时，将值与状态匹配
onInputChange=e=>{
this.setState（{userSearchTerm:e.target.value}）；
};
//提交输入时，获取API
onInputSubmit=e=>{
e、 预防默认值（）；
const movieName=this.state.userSearchTerm；
const KEY=“XXXXXX”；
const searchQueryhttps://api.themoviedb.org/3/search/movie?api_key=${KEY}&language=en-US&query=${movieName}&page=10'；
get（searchQuery）.then（res=>{
log（“res是------”，res）
this.setState（{movies:res.data.results}）；
});
};
render（）{
返回(

{this.state.movies.map（movie=>(
{movie.original_title}
))}

);
}
}
导出默认搜索栏；

您应该使用

this.setState（{movies:res.data.results}）

和

{movie.original_title}

---

让我知道它是否有效

您使用的API正在返回一个对象，其中“results”是您要查找的键。如果将setState更新为

this.setState（{movies:res.data.results}）你应该得到你想要的东西


作为旁注，我将使用类似于
{Array.isArray（this.state.movies）和&this.state.movies.map（movie=>（…
这将有条件地仅在
movies
设置为状态并且是数组时渲染输出。

您需要将setState调用更改为：
this.setState（{movies:res.data.results}）；
响应不是数组，而是一个如下所示的对象：
{
“第10页”，
“总结果”：136643，
“总页数”：6833页，
“结果”：[
{
“计票”：110，
“id”：13189，
“视频”：假，
“平均投票数”：7.3，
“标题”：“圣诞颂歌”，
“人气”：6.52，
“海报路径”：“/m3T3iLdE6J5PrqvvP0XNHBvM2bm.jpg”，
“原始语言”：“en”，
“原创标题”：“圣诞颂歌”，
“类型识别码”：[
18,
10751,
14,
10770
],
“背景路径”：“/gaTpxTYQMGoagtMVYK8F7SjqTGM.jpg”，
“成人”：假，
《概述》：“一个老吝啬鬼，为自己冷漠的本性找借口，当圣诞夜三个鬼魂拜访他时，他学会了真正的同情。”，
“发布日期”：“1984-12-17”
},
{
“计票”：419，
“id”：12103，
“视频”：假，
“平均投票数”：6.1，
“标题”：“一句话也别说”，
“人气”：9.995，
“海报路径”：“/qx3hgW9MqxsEEFjx4eSbpp1Fe2l.jpg”，
“原始语言”：“en”，
“原始标题”：“一句话也不要说”，
“类型识别码”：[
53
],
“背景路径”：“/AaOtoMzqWJPSNXPRKwbvqf6MbKo.jpg”，
“成人”：假，
“概述”：“当一名精神病医生的女儿被绑架时，他惊恐地发现绑架者的要求是他突破到一名患有创伤后应激障碍的年轻女性身上，她知道一个秘密……”，
“发布日期”：“2001-09-28”
}
]
}
res.data

是什么样子的？你的意思是向所有人发布你的API密钥吗？当我向你的get请求添加控制台日志以查看res返回的内容时，它将一无所获。因此，你可能需要查看你的url并验证它是否正确firstObject{data:Object，status:200，statusText:“OK”，标题：对象，配置：对象…}数据：对象页：10个总计结果：47个总计结果：3个结果：数组[0]状态：200状态文本：“确定”headers:Object-config:Object-request:xmlhttprequest非常感谢！它正在工作。快速提问，我需要使用'res.data.results'和'res.results'对比的原因是什么？@JDFill，因为电影来自API.axios results co的

res.data.results