React Native Multiple Fetch возвращает неправильные значения - PullRequest
Новая
       12

React Native Multiple Fetch возвращает неправильные значения

0 голосов
/ 09 февраля 2020


Я пытаюсь получить выборки из разных источников.
URL (например, 'this.country ["A"] + this.props.productLink') составляет json данные для каждой страны.
Так что я ожидаю получить соответствующие доходы для каждой страны. Однако, когда я печатаю результат, он пропускает значения некоторых стран, но вместо этого печатает значения других стран, такие как [СТРАНА 3, СТРАНА 3, СТРАНА 4, СТРАНА 5, СТРАНА 6, СТРАНА 7, СТРАНА 8, СТРАНА 9, СТРАНА 3, СТРАНА 3]. Длина массива результатов равна 10, как и ожидалось. Я использовал обещания. Все, чтобы получить сохранение заказа. Интересно, почему это происходит?

Под componentDidMount (): 

fetchData()
{
    Promise.all([axios.get(this.country["A"] + this.props.productLink),
        axios.get(this.country["B"] + this.props.productLink),
        axios.get(this.country["C"] + this.props.productLink),
        axios.get(this.country["D"] + this.props.productLink),
        axios.get(this.country["E"] + this.props.productLink),
        axios.get(this.country["F"] + this.props.productLink),
        axios.get(this.country["G"] + this.props.productLink),
        axios.get(this.country["H"] + this.props.productLink),
        axios.get(this.country["I"] + this.props.productLink),
        axios.get(this.country["J"] + this.props.productLink)])
    .then(([res1, res2, res3, res4, res5, res6, res7, res8, res9, res10]) => { 
        return Promise.all([res1.data, res2.data, res3.data, res4.data, res5.data, res6.data, res7.data, res8.data, res9.data, res10.data]) 
    })
    .then(([res1, res2, res3, res4, res5, res6, res7, res8, res9, res10]) => {
        const rawLoaded = [res1[this.priceSelector],res2[this.priceSelector],res3[this.priceSelector],res4[this.priceSelector],res5[this.priceSelector],
                res6[this.priceSelector],res7[this.priceSelector],res8[this.priceSelector],res9[this.priceSelector],res10[this.priceSelector]]
        console.log(rawLoaded)
        if (rawLoaded.length == 10)
            this.setState({isloading:true, rawPrice:rawLoaded})
    })
    .catch((error) =>{
        console.error(error)
    })
}

1 Ответ

0 голосов
/ 09 февраля 2020

Я думаю, это может происходить из-за того, как вы обрабатываете свои данные. Прежде всего, вам не нужно вручную создавать новый массив в обоих .then() обратных вызовах, лучше было бы вызвать .map() для существующих массивов. Вам также не нужно звонить Promise.all() после того, как вы получили ответы от axios, поскольку ничего из того, что вы передаете, не является Promise. Дайте следующую реализацию шанс. 

function fetchData() {
    const { productLink } = this.props;

    Promise.all([
        axios.get(this.country["A"] + productLink),
        axios.get(this.country["B"] + productLink),
        axios.get(this.country["C"] + productLink),
        axios.get(this.country["D"] + productLink),
        axios.get(this.country["E"] + productLink),
        axios.get(this.country["F"] + productLink),
        axios.get(this.country["G"] + productLink),
        axios.get(this.country["H"] + productLink),
        axios.get(this.country["I"] + productLink),
        axios.get(this.country["J"] + productLink)
    ])
    .then(results => {
        const resultData = results.map(res => res.data);
        const rawLoaded = resultData.map(data => data[this.priceSelector]);

        if (rawLoaded.length != 10) {
            console.warn('Unexpected output');
            return;
        }

        this.setState({ 
            isLoading : true,
            rawPrice : rawLoaded
        });
    })
    .catch(error => {
        console.warn(`An error occured while fetching data - ${error}`);
    });
}
...