【发布时间】：2019-04-21 18:52:52
【问题描述】：
我犯了一个愚蠢的错误。
比我尝试使用这个网址：https://api.unsplash.com/photos?client_id=...&page=1 没关系
比我尝试使用这个网址：https://api.unsplash.com/search/photos?client_id=...&page=1&query=office 失败了：
TypeError: items.map 不是函数 使成为 src/App.js:51
48 | </div>
49 | </nav>
50 |
> 51 | <div className="row container text-center">
| ^ 52 | {items.map(item => (componentDidMount/
24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')
25 | .then(res => res.json())
26 | .then(json => {
> 27 | this.setState({
| ^ 28 | isLoaded: true,我的 App.js 代码：
import React, { Component } from 'react';
import fetch from 'isomorphic-fetch'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
// const Child = ({match}) => (
// <div>
// <h1>ID: {match.params.tag}</h1>
// </div>
// )
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
isLoaded: false
}
}
componentDidMount() {
fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json
});
});
}
render() {
var { isLoaded, items } = this.state;
if (!isLoaded) {
return "<div>Loading...</div>";
}
return (
<Router>
<div className="App">
<nav className="navbar navbar-light bg-light justify-content-between">
<div className="container">
<a className="navbar-brand">MediaPark</a>
<form className="form-inline">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div className="row container text-center">
{items.map(item => (
<div className="card col-md-4" key="{item.id}">
<img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>
<div class="card-body">
<h5 class="card-title">{item.id}</h5>
<p class="card-text">{item.description}</p>
<a href={item.urls.raw} class="btn btn-primary">Full image</a>
</div>
</div>
))}
</div>
</div>
</Router>
);
}
}
export default App;为什么我得到错误 TypeError: items.map is not a function，然后我使用 prevouse URL 就可以了。我想通过新的 REST API url 创建搜索。
【问题讨论】：
-
在此处记录
json的值：.then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); });并检查它应该是一个数组。