React - componentDidMount API調用不會獲取數據？

Question

所以我想創建這個圖庫。我先硬編碼鏈接到圖像，但現在想通過API調用獲取圖像。我試圖實現這一點，但它失敗了，它仍然從flickrImages數組中獲取硬編碼圖像。有什麼建議？ （這是從一個教程的方式）

import React, {Component} from 'react' 

const flickrImages = [ 
    "https://farm2.staticflickr.com/1553/25266806624_fdd55cecbc.jpg", 
    "https://farm2.staticflickr.com/1581/25283151224_50f8da511e.jpg", 
    "https://farm2.staticflickr.com/1653/25265109363_f204ea7b54.jpg", 
    "https://farm2.staticflickr.com/1571/25911417225_a74c8041b0.jpg", 
    "https://farm2.staticflickr.com/1450/25888412766_44745cbca3.jpg" 
]; 

export default class Gallery extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     images: flickrImages, 
     selectedImage: flickrImages[0] 
    } 
    } 
    componentDidMount() { 
    const API_KEY = 'a46a979f39c49975dbdd23b378e6d3d5'; 
    const API_ENDPOINT = `https://api.flickr.com/services/rest/?method=flickr.interestingness.+getList&api_key=${API_KEY}&format=json&nojsoncallback=1&per_page=5`; 

    fetch(API_ENDPOINT).then((response) => { 
     return response.json().then((json) => { 
     const images = json.photos.photo.map(({farm, server, id, secret}) => { 
      return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg` 
     }); 
     this.setState({images, selectedImage: images[0]}); 
     }) 
    }) 
    } 

    handleThumbClick(selectedImage) { 
    this.setState({ 
     selectedImage 
    }) 
    } 

    render() { 
    const {images, selectedImage} = this.state; 

    return (
     <div className="image-gallery"> 
     <div className="gallery-image"> 
      <div> 
      <img src={selectedImage} /> 
      </div> 
     </div> 
     <div className="image-scroller"> 
      {images.map((image, index) => (
      <div key={index} onClick={this.handleThumbClick.bind(this,image)}> 
       <img src={image}/> 
      </div> 
     ))} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

的API_ENDPOINT是不正確的，

flickr.interestingness.+getList&api_key=${API_KEY} 

應該是

flickr.interestingness.getList&api_key=${API_KEY} 

class Gallery extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     images: [], 
 
    } 
 
    } 
 
    componentDidMount() { 
 
    const API_KEY = 'a46a979f39c49975dbdd23b378e6d3d5'; 
 
    const API_ENDPOINT = `https://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=${API_KEY}&format=json&nojsoncallback=1&per_page=5`; 
 

 
    fetch(API_ENDPOINT).then((response) => { 
 
     return response.json().then((json) => { 
 
     console.log(json); 
 
     const images = json.photos.photo.map(({farm, server, id, secret}) => { 
 
      return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg` 
 
     }); 
 
     this.setState({images, selectedImage: images[0]}); 
 
     }) 
 
    }) 
 
    } 
 

 
    handleThumbClick(selectedImage) { 
 
    this.setState({ 
 
     selectedImage 
 
    }) 
 
    } 
 

 
    render() { 
 
    const {images, selectedImage} = this.state; 
 

 
    return (
 
     <div className="image-gallery"> 
 
     <div className="gallery-image"> 
 
      <div> 
 
      <img src={selectedImage} /> 
 
      </div> 
 
     </div> 
 
     <div className="image-scroller"> 
 
      {images.map((image, index) => (
 
      <div key={index} onClick={this.handleThumbClick.bind(this,image)}> 
 
       <img src={image}/> 
 
      </div> 
 
     ))} 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Gallery name="World" />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>