Flickr api 不使用 React 获取图像

Question

我正在尝试从标签中获取图像列表，但没有返回任何内容

常量网址 = "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true">

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      items: []
    }
  }
  componentWillMount() {
    fetch(url,{
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            mode: 'no-cors',
            credentials: 'include'
    })
      .then((response) => {
        console.log(response.data.items);
            this.setState({
                items: response.data.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 代替 fetch。您的代码适用于axios：

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import axios from 'axios'
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      items: []
    }
  }
  componentWillMount() {
    let url = 'https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true';
    axios.get(url, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      mode: 'no-cors',
      credentials: 'include'
    })
      .then((response) => {
        console.log("dat", response);
        console.log(response.data);
        this.setState({
          items: response.data.items
        })
      })
      .catch((err) => {
      })
  }
  render() {
    const mappedStorage = this.state.items.map((item) => <li>{item.media.m} </li>)
    return (
      <div>
        hello
                <ul>{mappedStorage}</ul>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

看这里： https://codesandbox.io/s/3qyrnn7y66