如何使用 axios 和 useEffect 过滤 JSON 数据？

Question

我想从这个 json 文件中过滤数据：

Array(53)
0: {fips: "02", country: "US", state: "AK", county: null, level: "state", …}
1: {fips: "01", country: "US", state: "AL", county: null, level: "state", …}
2: {fips: "05", country: "US", state: "AR", county: null, level: "state", …}
3: {fips: "04", country: "US", state: "AZ", county: null, level: "state", …}
4: {fips: "06", country: "US", state: "CA", county: null, level: "state", …}
5: {fips: "08", country: "US", state: "CO", county: null, level: "state", …}
6: {fips: "09", country: "US", state: "CT", county: null, level: "state", …}
7: {fips: "11", country: "US", state: "DC", county: null, level: "state", …}
8: {fips: "10", country: "US", state: "DE", county: null, level: "state", …}
9: {fips: "12", country: "US", state: "FL", county: null, level: "state", …}
10: {fips: "13", country: "US", state: "GA", county: null, level: "state", …}
11: {fips: "15", country: "US", state: "HI", county: null, level: "state", …}
12: {fips: "19", country: "US", state: "IA", county: null, level: "state", …}
13: {fips: "16", country: "US", state: "ID", county: null, level: "state", …}
14: {fips: "17", country: "US", state: "IL", county: null, level: "state", …}
15: {fips: "18", country: "US", state: "IN", county: null, level: "state", …}
16: {fips: "20", country: "US", state: "KS", county: null, level: "state", …}
17: {fips: "21", country: "US", state: "KY", county: null, level: "state", …}
18: {fips: "22", country: "US", state: "LA", county: null, level: "state", …}
19: {fips: "25", country: "US", state: "MA", county: null, level: "state", …}
20: {fips: "24", country: "US", state: "MD", county: null, level: "state", …}

0:
actuals: {cases: 65944, deaths: 318, positiveTests: 107163, negativeTests: 2044164, contactTracers: 235, …}
annotations: {cases: {…}, deaths: {…}, positiveTests: {…}, negativeTests: {…}, contactTracers: {…}, …}
country: "US"
county: null
fips: "02"
lastUpdatedDate: "2021-04-21"
lat: null
level: "state"
locationId: "iso1:us#iso2:us-ak"
long: null
metrics: {testPositivityRatio: 0.030363378437363597, testPositivityRatioDetails: {…}, caseDensity: 22.164440621268295, contactTracerCapacityRatio: 0.28986784140969163, infectionRate: 0.968046978543, …}
population: 731545
riskLevels: {overall: 2, testPositivityRatio: 1, caseDensity: 2, contactTracerCapacityRatio: 1, infectionRate: 1, …}
state: "AK"
url: "https://covidactnow.org/us/alaska-ak"

如何使用 axios 和 React Hooks 过滤这些数据，只获取状态名称及其实际值作为变量，以便稍后在搜索 UI 中传递？

这是我目前的代码：

useEffect(() => {
        
        axios.get('https://api.covidactnow.org/v2/states.json?apiKey={apiKey}')
      
        .then(response => {
          return response.data;
          })
          .then(responseData => {
            console.log(responseData)
          })
        .catch(err => {
          console.log(err);
        });
      }, []);

Answer 1

const [data,setData] = useState([]);

useEffect(() => {      
        axios.get('https://api.covidactnow.org/v2/states.json?apiKey={apiKey}')
        .then(response => response.data)
        .then(responseData => {
            setData(responseData)
          })
        .catch(err => {
          console.log(err);
        });
      }, []);

我注意到可能没有理由尝试摆脱其他领域。您可以使用setData 保存整个响应。

useEffect 运行后，data 将填充一个您可以在组件中访问的数组。

---

更新，基于 cmets：

要过滤出一个州的数据，你可以这样做：

const [stateData, setStateData] = useState();

//...

.then(responseData => {
  setStateData(responseData.filter(i => i.state === stateName)[0])            
})

然后，您可以通过以下方式访问各个属性：

stateData.actuals
stateData.deaths

如果您想在保留所有其他 API 数据的同时执行此操作（以便您可以更改状态，例如，无需进行其他调用，它可能看起来像这样）：

const [stateName, setStateName] = useState("AK");
const [data,setData] = useState([]);
const [stateData, setStateData] = useState();

useEffect(() => {      
        axios.get('https://api.covidactnow.org/v2/states.json?apiKey={apiKey}')
        .then(response => response.data)
        .then(responseData => {
            setData(responseData)
          })
        .catch(err => {
          console.log(err);
        });
      }, []);

useEffect(() => {
  setStateData(data.filter(i => i.state === stateName)[0]) 
},[data, stateName])

注意：我还没有对 [0] 是否存在进行任何错误检查——如果数据不存在，您可能需要一个案例