Question

在我在React.js中制作的项目中，我遇到了 ITERATIONS 的问题。在此React组件（ ViewSectionList ）中，我获取 6个图像。而且每个都来自不同的API。

我的代码允许渲染这些图片，但它不是高效，主要是因为我不知道如何：

在一次抓取中获取多个API网址中的所有图片（我尝试承诺，但我无法识别获取数据为JSON
如何将找到的图像保存在一个数组中（获取setstate ）
如何使用地图功能渲染获得的数据

图像隐藏在API中作为响应[0] .urls.small 为简单起见，我将渲染中的fetch和div缩短为一个

如果有任何帮助，我将不胜感激：）

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexLink, IndexRoute, hashHistory} from 'react-router';

class ViewSectionList extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            imgs: [] // I'm not using it :(
        };
    }

    componentDidMount() {

        let urls = [
            'https://api.site.com/categories/2/photos/?client_id=MY-API', 
            'https://api.site.com/categories/3/photos/?client_id=MY-API', 
            'https://api.site.com/categories/4/photos/?client_id=MY-API', 
            'https://api.site.com/categories/8/photos/?client_id=MY-API', 
            'https://api.site.com/categories/6/photos/?client_id=MY-API', 
            'https://api.site.com/categories/7/photos/?client_id=MY-API', 
        ]

        // ------ HOW TO ITERATE THIS FETCH? ------
        fetch(urls[0])
        .then(resp => resp.json())
        .then(response => {
            // -------- HOW TO SAVE DATA INTO A SINGLE ARRAY?
            this.setState({  img2: response[0].urls.small  })
        })

    }
    render() {

        return (
            <div className="gallery">
                 <h1>Section list</h1>
                 <div className="section-list">

                    // ------HOW TO MAP THESE ELEMENTS
                    <Link className="single-section" to="/section/2">
                        <img className="image" src={this.state.img2} alt="" />
                    </Link>
                 </div>
             </div>
        )
    }
}
export { ViewSectionList }

在React.js中使用fetch API的照片库需要迭代

0 个答案: