React Native Multiple Fetch 返回错误的值

Posted 2023-02-23

【中文标题】React Native Multiple Fetch 返回错误的值

【英文标题】：React Native Multiple Fetch Returns Wrong Values

【发布时间】：2020-05-25 00:28:55

【问题描述】：

我正在尝试从多个不同的来源获取数据。 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)
    )

【参考方案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`);
    );

【讨论】：

非常感谢。我尝试了您的代码，但在打印 rawLoaded 时仍然得到错误的结果。我正在从包含“p/ajax/file.json”的 url 中获取。它是否与ajax的行为有关？