如何基于筛选条件从API获取对应数据？React调用疫情API异常排查

你的 fetchData 方法存在逻辑错误：获取到接口返回的所有国家数据后，直接对 Countries 数组解构了下标为0的元素，无论传入的国家参数是什么，永远只会拿到第一个国家（阿富汗）的累计确诊数据，这是问题的核心诱因。

修改 index.js 中的 fetchData 方法，拿到全量国家数据后，通过传入的国家名称匹配对应条目再返回目标数据即可，修正后的代码如下：

//method for fetchingData
export const fetchData = async (country) => {
    if (country) {
        try {
            const { data: { Countries } } = await axios.get('https://api.covid19api.com/summary')
            // 按传入的国家名匹配对应条目
            const targetCountry = Countries.find(item => item.Country === country)
            return targetCountry ? { TotalConfirmed: targetCountry.TotalConfirmed } : {}
        } catch (error) {
            console.log(error)
            return {}
        }
    }
}

当前每次切换国家都会重新请求一次全量的summary接口，性能开销较大，你可以把首次请求拿到的Countries数组存在上层组件的state中，后续切换国家时直接从本地数据过滤匹配，无需重复发请求，加载速度会更快。

内容的提问来源于stack exchange，提问作者aish