在App.js中按下“狗”按钮时出现以下错误。
true
我看不到原因,因为道具正确传递了。搜索功能按预期工作。我已经尝试过类似问题的一些建议,但无法使用“狗”按钮来搜索狗图像。
App.js
Unhandled Rejection (TypeError): Cannot read property 'photo' of undefined
(anonymous function)
29 | .then(response => {
30 |
31 | this.setState({
> 32 | images: response.data.photos.photo
| ^ 33 |
SearchForm.js
import React, { Component} from "react";
import SearchForm from './components/SearchForm';
import axios from 'axios';
import ImageList from './components/ImageList';
class App extends Component
{
constructor() {
super();
this.state = {
images: [],
};
}
componentDidMount() {
this.performSearch()
}
performSearch = (query) => {
return axios.get(`https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=apikey&tags=${query}&per_page=24&format=json&nojsoncallback=1`)
.then(response => {
this.setState({
images: response.data.photos.photo
})
});
}
render() {
return (
<div>
<div className="main-header">
<div className="inner">
<h1 className="main-title">GifSearch</h1>
<SearchForm onSearch={this.performSearch}/>
</div>
</div>
<div className="main-content">
{ <ImageList data={this.state.images} />
}
</div>
</div>
);
}
}
export default App;
ImageList.js
import React, { Component } from 'react';
export default class SearchForm extends Component {
state = {
searchText: ''
}
onSearchChange = e => {
this.setState({ searchText: e.target.value });
}
onSearchButton = e => {
this.setState({searchText: "dog"});
this.props.onSearch(this.state.searchText)
}
handleSubmit = e => {
e.preventDefault();
this.props.onSearch(this.state.searchText)
e.currentTarget.reset();
}
render() {
return (
<form className="search-form" onSubmit={this.handleSubmit} >
<label className="is-hidden" htmlFor="search">Search</label>
<input type="search"
onChange={this.onSearchChange}
name="search"
placeholder="Search..." />
<button type="submit" id="submit" className="search-button"><i className="material-icons icn-search">search</i></button>
<button onChange={this.onSearchButton}>Dog</button>
</form>
);
}
}