Функция asyn c создает L oop запросов - PullRequest
0 голосов
/ 23 марта 2020

, пока я пытаюсь использовать asyn c -aait для получения URL-адресов и обновления state. По какой-то причине я не понимаю, функция fetchData перехватывается во всех oop отправках новых Запросы все время, когда я выполняю его, почему это и кто я могу сделать лучше? Заранее спасибо за помощь.

import React, { Component } from 'react';

class TableCard extends Component {
    constructor(props) {
        super(props)
        this.state = {

        };
    }


    fetchData = async function() {
        const urls = [
            'https://jsonplaceholder.typicode.com/users',
            'https://jsonplaceholder.typicode.com/posts',
            'https://jsonplaceholder.typicode.com/albums'
        ]
        try {
            const arrayOfPromises = urls.map(url => fetch(url))
            for await (let request of arrayOfPromises) {
                this.setState({
                    users: arrayOfPromises[0],
                    posts: arrayOfPromises[1],
                    albums: arrayOfPromises[2]
                });
            }
        } catch (err) {
            const error = `we had an error ${err}`;
        } finally {
            console.log(this.state);
        }
    }

    render() {
        {
            this.fetchData();
        }
        return ( <
            div >
            <
            h3 className = 'titles' > React Dynamic Table < /h3> <
            table className = 'tables' >
            <
            /table> <
            /div>
        )
    }
}

export default TableCard;
...