Javascript TypeError:加载照片时，data.map不是reactjs中的函数

我尝试使用unsplash api创建图像搜索应用程序，但它显示错误

TypeError:data.map不是函数。直到昨晚它还可以正常工作，但现在它突然显示出这个错误。它最初加载了带有图像的页面，但当我搜索moon并转到最后一页时，它开始显示这个错误。然后我刷新了页面，它再次显示图像，但一旦我按页面项目从5到9进行操作，它就会再次显示错误，现在它会继续显示错误。这是api的问题吗？但是，即使是api，它也应该显示一个空白页，因为我在api调用方法的try catch块中执行了
photos:[]
，但它显示了错误。我不确定我的代码出了什么问题。有人能帮我吗

App.js

import React, { Component } from "react";
import Pagination from "./Pagination";
import List from "./List";
import "./styles.css";
import axios from "axios";

const LOAD_STATE = {
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
  LOADING: "LOADING"
};

const appId = "N1ZIgf1m1v9gZJhledpAOTXqS8HqL2DuiEyXZI9Uhsk";

export default class App extends Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
    this.fetchPhotos = this.fetchPhotos.bind(this);
    this.state = {
      photos: [],
      totalPhotos: 0,
      perPage: 5,
      currentPage: 1,
      loadState: LOAD_STATE.LOADING,
      search: ""
    };
  }
  handleChange(e) {
    this.setState({ search: e.target.value });
  }

  componentDidMount() {
    this.fetchPhotos(this.state.currentPage);
  }

  fetchPhotos(page = 1) {
    var self = this;
    const { search, perPage } = this.state;
    const url1 = `https://api.unsplash.com/photos?page=${page}&client_id=${appId}`;
    const url2 =
      `https://api.unsplash.com/search/photos?page=${page}&query=` +
      search +
      "&client_id=" +
      appId;
    const url = search ? url2 : url1;

    if (search) {
      const options = {
        params: {
          page: page,
          per_page: perPage,
          order_by: "popularity"
        }
      };

      this.setState({ loadState: LOAD_STATE.LOADING });
      axios
        .get(url, options)
        .then(response => {
          console.log(typeof response.data);
          let photos;
          try {
            photos = response.data.results;
          } catch {
            photos = [];
          }
          this.setState({
            photos,
            totalPhotos: parseInt(response.headers["x-total"]),
            currentPage: page,
            loadState: LOAD_STATE.SUCCESS
          });
        })
        .catch(() => {
          this.setState({ loadState: LOAD_STATE.ERROR });
        });
    } else {
      const options = {
        params: {
          client_id: appId,
          page: page,
          per_page: perPage,
          order_by: "popularity"
        }
      };

      this.setState({ loadState: LOAD_STATE.LOADING });
      axios
        .get(url, options)
        .then(response => {
          console.log(typeof response.data);
          let photos;
          try {
            photos = response.data;
          } catch {
            photos = [];
          }
          self.setState({
            photos,
            totalPhotos: parseInt(response.headers["x-total"]),
            currentPage: page,
            loadState: LOAD_STATE.SUCCESS
          });
        })
        .catch(() => {
          this.setState({ loadState: LOAD_STATE.ERROR });
        });
    }
  }

  render() {
    return (
      <div className="app">
        <input
          onChange={this.handleChange}
          type="text"
          name="search"
          placeholder="Enter query"
        />
        <button
          type="submit"
          onClick={() => this.fetchPhotos(1)}
          className="button"
        >
          Submit
        </button>
        <Pagination
          current={this.state.currentPage}
          total={this.state.totalPhotos}
          perPage={this.state.perPage}
          onPageChanged={this.fetchPhotos.bind(this)}
        />
        {this.state.loadState === LOAD_STATE.LOADING ? (
          <div className="loader" />
        ) : (
          <List data={this.state.photos} />
        )}
        <Pagination
          current={this.state.currentPage}
          total={this.state.totalPhotos}
          perPage={this.state.perPage}
          onPageChanged={this.fetchPhotos.bind(this)}
        />
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“/Pagination”导入分页；
从“/List”导入列表；
导入“/styles.css”；
从“axios”导入axios；
常量加载状态={
成功：“成功”，
错误：“错误”，
加载：“加载”
};
const appId=“N1ZIgf1m1v9gZJhledpAOTXqS8HqL2DuiEyXZI9Uhsk”；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）；
this.fetchPhotos=this.fetchPhotos.bind（this）；
此.state={
照片：[]，
照片总数：0，
每页：5，
当前页面：1，
loadState:LOAD_STATE.LOADING，
搜索：“
};
}
手变（e）{
this.setState（{search:e.target.value}）；
}
componentDidMount（）{
this.fetchPhotos（this.state.currentPage）；
}
获取照片（第页=1）{
var self=这个；
const{search，perPage}=this.state；
常量url1=`https://api.unsplash.com/photos?page=${page}&client_id=${appId}`；
常量url2=
`https://api.unsplash.com/search/photos?page=${page}&query=`+
搜寻+
“&client\u id=”+
appId；
const url=search？url2:url1；
如果（搜索）{
常量选项={
参数：{
第页：第页，
每页：每页，
订购人：“受欢迎程度”
}
};
this.setState（{loadState:LOAD_STATE.LOADING}）；
axios
.get（url、选项）
。然后（响应=>{
日志（响应类型、数据）；
让照片；
试一试{
照片=响应。数据。结果；
}抓住{
照片=[]；
}
这是我的国家({
照片，
totalPhotos:parseInt（response.headers[“x-total”]），
当前页：第页，
loadState:LOAD_STATE.SUCCESS
});
})
.catch（（）=>{
this.setState（{loadState:LOAD_STATE.ERROR}）；
});
}否则{
常量选项={
参数：{
客户id:appId，
第页：第页，
每页：每页，
订购人：“受欢迎程度”
}
};
this.setState（{loadState:LOAD_STATE.LOADING}）；
axios
.get（url、选项）
。然后（响应=>{
日志（响应类型、数据）；
让照片；
试一试{
照片=响应数据；
}抓住{
照片=[]；
}
自我状态({
照片，
totalPhotos:parseInt（response.headers[“x-total”]），
当前页：第页，
loadState:LOAD_STATE.SUCCESS
});
})
.catch（（）=>{
this.setState（{loadState:LOAD_STATE.ERROR}）；
});
}
}
render（）{
返回(
这是一张照片（1）}
className=“按钮”
>
提交
{this.state.loadState===LOAD\u state.LOADING(
) : (
)}
);
}
}

List.js

import React from "react";
import ListItem from "./ListItem";
const List = ({ data }) => {
  var items = data.map(photo => <ListItem key={photo.id} photo={photo} />); //error here
  return <div className="grid">{items}</div>;
};

export default List;

从“React”导入React；
从“/ListItem”导入ListItem；
常量列表=（{data}）=>{
var items=data.map（photo=>）；//此处出错
返回{items}；
};
导出默认列表；
我发现了您面临的问题，问题是当API响应中有空数据时，photos变量保持为
photos={}
，其中预期为
photos=[]
，这是您在
catch
块中所做的，但它永远不会转到catch块，因为具有空数据不是错误，我也在这里解决了您的问题。
在沙箱中似乎工作正常。是吗？你有没有搜索过月亮并转到最后一页？或者把每一页的项目改成9或其他数字？在这里@brijesh pant对我没有任何帮助，只要试着点击许多你可以点击的页码，你就会看到一个错误，我想。另外，他们的文档页面刚刚给了我两个大括号。现在他们的服务器关闭了吗？好的，我在页面刷新中看到错误。你的演示没有显示任何照片。页面是空白的，只有搜索栏是，因为如果您检查当前的响应，它有空数据，一旦响应将在response.data中有一些数据，它将开始显示图像。那么这是api的问题吗？是的，在添加我的代码之前，我们的代码中有问题，因为我们没有处理空数据条件，现在我们已经处理了空数据条件，它在任何情况下都会工作，目前它是API中的问题。好的，谢谢。。希望它能在api再次工作时起作用。。我想知道为什么将每项更改为9也会出现同样的问题