为什么我不能将此请求保存在状态 Reactjs 中

Question

import React, {useEffect, useState} from 'react';
import api from '../../services/api';
import axios from 'axios';

export default function Body() {
const[resWorld, setResWorld] = useState([]);
const[ranking, setRanking] = useState([]);


useEffect(() =>{
axios.get('https://api.covid19api.com/world/total').then(res => setResWorld(res.data))

},[]);
useEffect(() =>{
axios.get('https://covid19-brazil-api.now.sh/api/report/v1/countries')
.then(res => setRanking(res.data))

},[])

首先对不起我的英语... 我必须请求这两个不同的 API 并保存在这些状态下......问题是第二个( 显然响应不同，是一个对象，我不知道如何在排名状态下保存

Answer 1

因为两者的响应不同。根据您的答案，看起来您可以存储resWorld的数据，但不能存储排名。如果是这样，您可以执行以下操作

import React, {useEffect, useState} from 'react';
import api from '../../services/api';
import axios from 'axios';

export default function Body() {
const[resWorld, setResWorld] = useState({});
const[ranking, setRanking] = useState([]);

useEffect(() =>{
axios.get('https://api.covid19api.com/world/total').then(res => setResWorld(res.data))

},[]);
useEffect(() =>{
axios.get('https://covid19-brazil-api.now.sh/api/report/v1/countries')
.then(res => setRanking(res.data.data)) // HERE IS THE CHANGE

},[])

useEffect(() => {
console.log('Ranking', ranking)
// do the operation here which you want after Ranking state is updated
}, [ranking]);

return (<div> {JSON.stringify(ranking)} </div>)
}