Question

我正在开发一款能够调用Unsplash API的应用并显示响应的应用。当我在/photos中获取了抓取请求时，我只能使用componentDidMount()端点轻松获取/显示响应，但我想让应用可搜索，因此我添加了performSearch()使用默认查询。

但添加performSearch会导致此错误： TypeError: cannot read property 'map' of undefined

这是我在测试时回来的JSON： Search endpoint + query

我已尝试过我在论坛上找到的其他解决方案，但到目前为止，没有任何解决方案可以解决问题。我肯定会找回一个数组，所以不应该map工作吗？

＆＃13;

class App extends Component {

  constructor() {
    super();
    this.state = {
      results: [],
      loading: true
    };
  }

  componentDidMount() {
    this.performSearch();
  }

  performSearch = (query = 'camping') => {
    fetch(`https://api.unsplash.com/search/photos?page=3&query=${query}&client_id=${client_id}`)
      .then(response => response.json())
      .then(responseData => {
        this.setState({
          results: responseData.data,
          loading: false
        });
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

  render() {

    return ( 
      <div className = "App">
        <SearchPhotos onSearch = {this.performSearch} /> 
        <div> 
          {
            (this.state.loading) ? <p>Loading</p> :<PhotoList results={this.state.results} />
          } 
        </div> 
      </div>
    );
  }
}

export default App;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

import React from 'react';

const PhotoList = props =>

    <ul>
        {props.results.map((result, index) =>
            <li key={index}>
                <img src={result.urls.small} key={result.id} />
            </li>
        )}
    </ul>;

export default PhotoList;

＆＃13;

import React, { Component } from 'react';


class SearchPhotos extends Component {

    state = {
        searchText: ''
    }

    onSearchChange = e => {
        this.setState({
            searchText: e.target.value
        });
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.onSearch(this.query.value);
        e.currentTarget.reset();
    }

    render() {
        return(
            <form className="search-form" onSubmit={this.handleSubmit}>
                <input type="search"
                    onChange={this.onSearchChange}
                    name="search"
                    ref={(input) => this.query = input}
                    placeholder="Search..." />
                <button className="search-button" type="submit" id="submit">Go!</button>
            </form>
        );
    }
}

export default SearchPhotos;

＆＃13;

Answer 1

performSearch = (query = 'camping') => {
    fetch(`https://api.unsplash.com/search/photos?page=3&query=${query}&client_id=${client_id}`)
      .then(response => response.json())
      .then(responseData => {
        this.setState({
          results: responseData.results,
          loading: false
        });
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

responseData.results是您正在寻找的数组。

在React中搜索功能并获取api

1 个答案: