无法从Unsplash API获取JSON

Question

I was trying to make a image search app with unsplash api. I can access api by writing the url in to the browser like this this but I can't get it to work within my code. anyone can help? Also no error is occurring and I am trying to get the json file to be printed to the console. I am following this documentation here .

import React, { Component } from 'react';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);

      this.state = {
        applicationId: '1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc',
        url: 'https://api.unsplash.com/search/photos?client_id=',
        pagecount: 1
      }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    let query = document.getElementById('input').value;
    fetch(this.state.url + this.state.applicationId + '&query=' + query + '&page=' + this.state.pagecount)
      .then(json => {
        console.log(json)
      })
      .catch(err => console.log('error occured' + err));
  }

  render() {
    return (
      <div className="App">
        <form id='form'>
          <input type='text' id='input' ></input>
          <input type='submit' id='submit' onClick={this.handleClick} ></input>
        </form>
        <div id='field' >
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

Problem : You Fetch does not return actual JSON, it return just HTTP response. To extract the JSON body content from the response, we use the json() method.

Have you checked your final URL ? I got a result just with few changes. Are you getting client_id and query word?

Solution

 const client_id ="1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc" const query = 'woods'; function makeCall(){ fetch(`https://api.unsplash.com/search/photos?client_id=${client_id}&query=${query}`,{method:'get'}). then(res=>res.json()) .then(res=>console.log("boommer",res)) .catch(res=>console.log("error",res)) } makeCall(); 

Working example of react CodeSandBox