React - componentDidMount API调用不会获取数据？

  • Z时代
  • 2024-01-10
  • 分类：问答

所以我想创建这个图库。我先硬编码链接到图像，但现在想通过API调用获取图像。我试图实现这一点，但它失败了，它仍然从flickrImages数组中获取硬编码图像。有什么建议？ （这是从一个教程的方式）React - componentDidMount API调用不会获取数据？

import React, {Component} from 'react' 
const flickrImages = [ 
    "https://farm2.staticflickr.com/1553/25266806624_fdd55cecbc.jpg", 
    "/wp-content/uploads/new2022/20220327voicc/39150525.jpg", 
    "/wp-content/uploads/new2022/20220327voicc/40150526.jpg", 
    "/wp-content/uploads/new2022/20220327voicc/41150527.jpg", 
    "/wp-content/uploads/new2022/20220327voicc/42150528.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> 
    ) 
    } 
}

回答：

的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>

以上是 React - componentDidMount API调用不会获取数据？ 的全部内容， 来源链接： utcz.com/qa/265232.html

回到顶部