У меня глупая ошибка.
Чем я пытаюсь использовать этот URL: https://api.unsplash.com/photos?client_id=...&page=1 Все нормально
Чем я пытаюсь использовать этот URL: https://api.unsplash.com/search/photos?client_id=...&page=1&query=officeОшибка:
Ошибка типа: items.map не является функцией render 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,
My 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 не является функцией, тогда я использую преобладающий URL-адрес, все в порядке.Я хочу создать поиск по новому URL REST API.