如何显示基于过滤器的API数据?

Question

请帮忙，这是API - https://api.covid19api.com/summary

我想显示"TotalConfirmed"(来自API)，用于从下拉列表中选择的国家。下面是我的代码，我的代码中的问题是，当我从下拉列表中选择任何国家时，它显示阿富汗的TotalConfirmed data ([0] index 0)，对于所有国家。

(用React JS编码)实时代码链接:https://codesandbox.io/s/brave-mayer-fh14v?file=/src/App.js

App.js

import React, { Component } from "react";
import TestPicker from "./components/newAPI/TestPicker";
import { fetchData } from "./components/newAPI";
class App extends Component {
state = {
data: {},
country: "",
};
handleCountryChange = async (country) => {
const data = await fetchData(country);
this.setState({ data: data, country: country });
console.log(country);
console.log("data", data);
};
render() {
return (
<div>
<TestPicker handleCountryChange={this.handleCountryChange} />
</div>
);
}
}
export default App;

'index.js

//method for fetchingData
export const fetchData = async (country) => {

if (country) {
try {
const { data: { Countries: [{ TotalConfirmed }] } } = await 
axios.get('https://api.covid19api.com/summary')
return { TotalConfirmed }
} catch (error) {
console.log(error)
}
}
}
//method for fetchingCountries for drop down list
export const fetchCountries = async () => {
try {
const { data: { Countries } } = await axios.get(`${url}`);
return Countries.map((country) => country.Country);
}
catch (error) {
console.log(error);
}
}
`.

TestPicker.js

import React, { useState, useEffect } from 'react';
import { NativeSelect, FormControl } from '@material-ui/core'
import { fetchCountries } from "./index.js"
const TestPicker = ({handleCountryChange}) => {
const [fetchedCountries, setFetchedCountries] = useState([])
useEffect(() => {
const fetchAPI = async () => {
setFetchedCountries(await fetchCountries());
}
fetchAPI();
}, []);
return (
<div className="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<FormControl>
<NativeSelect defaultValue="" onChange = {(e)=> 
handleCountryChange(e.target.value)}>
<option value="global">Global</option>
{fetchedCountries.map((country,i) => 
<option key={i} value={country}>{country}</option>)}
</NativeSelect>
</FormControl>
</div>
)
}
export default TestPicker

Answer 1

1-定义一个状态，并在onChange或onSubmit中使用seState。这样，只要用户选择一个国家，您的状态就会更新。您可以将国家名称传递给它。如const [chosenCountry,setChosenCountry]=useSate()

2-使用useEffect钩子或与之等价的生命周期，并将该状态作为第二个参数传递。不是setState，而是state。(在你的代码你有setFetchedCountries是错误的。应该是fetchedCountries

3-inuseEffect hook, useaxiosto fetch the data and set thefetchedCountries的状态。

Answer 2

//method for fetchingData
export const fetchData = async (country) => {
if (country) {
try {
const { data: { Countries: [{ TotalConfirmed }] } } = await 
axios.get('https://api.covid19api.com/summary')
return { TotalConfirmed }
} catch (error) {
console.log(error)
}
}
}

我用 替换了上面的代码

export async function fetchData(Country) {
const { data } = await axios.get(`${url}`);
if (Country === "Global") {
return console.log(data.Global.TotalConfirmed);
}
return data?.Countries?.filter(function (item) {
return item.Country === Country;
}).map(function ({ TotalConfirmed }) {
return TotalConfirmed;
});
}

和获取数据通过索引data[0]看到的例子希望这个工作，可能有更好的解决方案比这个

实例- https://codesandbox.io/s/vigorous-torvalds-jwfp3?file=/src/components/index.js:403-741