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()。在收到axios 的回复后，您也无需致电Promise.all()，因为您传入的内容都不是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}`);
    });
}