Question

我正尝试使用未启动的api制作图像搜索应用。我可以通过将网址写入this这样的浏览器来访问api，但无法在代码中使用它。有人可以帮忙吗？另外也没有错误发生，我正在尝试将json文件打印到控制台。我正在遵循本文档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

问题：您抓取操作不会返回实际的JSON，而只会返回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

1 个答案: