React Native Multiple Fetch返回错误值

Question

我正在尝试从多个不同来源获取数据。URL（例如'this.country [“ A”] + this.props.productLink'）是每个国家/地区的json数据。因此，我期望每个国家都能获得相应的回报。但是，当我打印结果时，它会丢失某些国家/地区的值，而是打印其他国家/地区的值，例如[COUNTRY3，COUNTRY3，COUNTRY4，COUNTRY5，COUNTRY6，COUNTRY7，COUNTRY8，COUNTRY9，COUNTRY3，COUNTRY3]。结果数组的长度为10，这与预期的一样。我使用了promises.all来保存订单。我不知道为什么会这样。

在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)
    })
}

Answer 1

我认为这可能是由于您如何处理数据而发生的。首先，您无需在两个.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}`);
    });
}