无法从 unsplash api 中获取 json

Question

我正在尝试使用 unsplash api 制作一个图像搜索应用程序。我可以通过像这样 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.

将 url 写入浏览器来访问 api

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

问题：您的 Fetch 没有 return 实际 JSON，它 return 只是 HTTP 响应。要从响应中提取 JSON 正文内容，我们使用 json() 方法。

你检查过你的期末考试了吗URL？我只做了很少的改动就得到了结果。您收到 client_id 和查询词了吗？

解决方案

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();

反应的工作示例CodeSandBox

无法从 unsplash api 中获取 json

Can't get json from unsplash api

html

javascript

reactjs

create-react-app