Flickr api 未使用 React 和 Axios 获取图像

Question

我正在尝试从标签中获取图像列表，但没有任何内容被控制台记录或呈现出来。不确定我是否缺少 api.

的参数

编码：http://codepen.io/anon/pen/PWgBgd?editors=0010

const url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json"

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      items: []
    }
  }

  componentWillMount() {
    axios.get(url)
      .then((response) => {
        console.log(response.data.jsonFlickrFeed.items);
            this.setState({
                items: response.data.jsonFlickrFeed.items
            })
      })
      .catch((err) => {
      })
  }

  render() {
        const mappedStorage = this.state.items.map((item) => <li>{item.media.m} </li>)

    return (
      <div>
       hello
                <ul>{mappedStorage}</ul>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.body)

Answer 1

您的 axios 调用失败：

.catch((err) => {
        debugger;
            console.log(err);
  })

Error: Network Error
    at e.exports (VM970 axios.min.js:2)
    at XMLHttpRequest.l.onerror (VM970 axios.min.js:2)

Answer 2

发现问题，Flickr 会用他们的 api 做一些奇怪的事情，除非你传递正确的东西。将 url 设置为：

http://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true

然后将代码更新为

axios.get("https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true") 
  .then((response) => {
    console.log(response.data.items);
    this.setState({
        items: response.data.items
    })
  })
  .catch((err) => {
  console.log(err)
  })

似乎最主要的是如果你不添加 nojsoncallback=true 则 JSON 他们 return 是一个回调函数，不能通过正常方式解析幸运的是他们给你一个参数return随心所欲。

工作笔http://codepen.io/finalfreq/pen/WRWgPw?editors=0011

Flickr api 未使用 React 和 Axios 获取图像

Flickr api not fetching images using React and Axios

reactjs

flickr

axios