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

Question

我曾尝试使用unsplashapi创建一个图像搜索应用程序，但它显示了错误TypeError: data.map is not a function。它一直工作到昨晚，但现在突然显示出这个错误。它最初加载了带有图像的页面，但当我搜索月亮并转到最后一页时，它开始显示这个错误。然后我刷新了页面，它再次显示图像，但当我完成从5到9的per_page项目时，它会再次显示错误，现在它会持续显示错误。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>
);
}
}

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;

Answer 1

我发现了您面临的问题，问题是当API响应中有空数据时，照片变量会像photos = {}一样保持不变，其中预期的是photos = []，这是您在catch块中所做的，但它从未进入catch块，因为有空数据不是错误，我也在Demo中解决了您的问题。