Javascript 未显示搜索数据

我一直在使用unsplash api制作一个图像搜索网站。在网站的安装上，图像显示良好。但是，当我输入搜索查询并单击提交时，我会得到

data.map不是一个函数

。 我希望能够显示搜索结果，但我认为我在执行搜索查询api调用的

handleSubmit

函数中出错了。我们将不胜感激

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 BASE_URL = "https://api.unsplash.com/photos?page=1";

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

  handleSubmit() {
    const { search, perPage } = this.state;
    console.log(search);
    const url =
      "https://api.unsplash.com/search/photos?page=1&query=" +
      search +
      "&client_id=" +
      appId;

    const options = {
      params: {
        client_id: appId,
        page: 1,
        per_page: perPage,
        order_by: "popularity"
      }
    };

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

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

  fetchPhotos(page) {
    var self = this;
    const { perPage } = this.state;

    const options = {
      params: {
        client_id: appId,
        page: page,
        per_page: perPage,
        order_by: "popularity"
      }
    };

    this.setState({ loadState: LOAD_STATE.LOADING });
    axios
      .get(BASE_URL, options)
      .then(response => {
        self.setState({
          photos: response.data,
          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.handleSubmit} 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} />
        )}
      </div>
    );
  }
}

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

从“React”导入React；
从“/ListItem”导入ListItem；
常量列表=（{data}）=>{
var items=data.map（photo=>）；//此行出错
返回{items}；
};
导出默认列表；

您应该使用

axios
     .get(url, options)
     .then(response => {
      const photos = response.data ? response.data.results : [];
      this.setState({
        photos,
        totalPhotos: parseInt(response.headers["x-total"]),
        currentPage: 1,
        loadState: LOAD_STATE.SUCCESS
      });
     })

而不是

axios
      .get(url, options)
      .then(response => {
        this.setState({
          photos: response.data,
          totalPhotos: parseInt(response.headers["x-total"]),
          currentPage: 1,
          loadState: LOAD_STATE.SUCCESS
        });
      })

---

在handleSubmit函数中

如果您检查API调用的响应，您将在

response.data.results中获得手机。所以当你设置照片时，它应该是
photos:response.data.results
wow。成功了。然而，当我转到第二页等，它不再提供搜索查询结果。你能帮个忙吗？它只在我搜索“cycle”时起作用，但不适用于任何其他搜索查询，比如flower@Freddy当我搜索cycle时，搜索工作正常，但当我搜索flower时，它会说数据未定义。为什么会出现这种异常？我还是会犯同样的错误。你能给我一个沙盒链接，上面有你更新过的代码和错误吗？我又检查了一遍。不再有任何错误。我再次更新。这不是解决问题的最佳方法，但你不会出现错误，我想你可以试试。
axios
      .get(url, options)
      .then(response => {
        this.setState({
          photos: response.data,
          totalPhotos: parseInt(response.headers["x-total"]),
          currentPage: 1,
          loadState: LOAD_STATE.SUCCESS
        });
      })