未处理的拒绝(TypeError):无法读取未定义的属性“照片”

时间:2020-11-01 14:48:47

标签: javascript reactjs react-redux axios

在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>      
    );
  }
}

0 个答案:

没有答案