我正在尝试从这个API获取数据
https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/total
数据成功显示在控制台中,但未显示在浏览器中
const [selectedCountry, setSelectedCountry] = useState('USA');
const [stats, setStats] = useState({});
useEffect(() => {
const fetchData = async () => {
const result = await axios.get(API_URL, {
headers: {
'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
'x-rapidapi-key': 'YOUR_API_KEY',
},
params: {
country: selectedCountry
}
});
setStats(result.data.data);
};
fetchData();
}, [selectedCountry]);
return (
<div className="flex flex-col items-center justify-center p-4">
<div className="select w-full md:w-1/2">
<h2 className="text-xl text-red-600 font-medium mb-3">Select a Country:</h2>
<select value={selectedCountry} onChange={e => setSelectedCountry(e.target.value)} className="block appearance-none w-full bg-white text-blue-500 border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
{countries.map(country => (
<option key={country} value={country}>{country}</option>
))}
</select>
</div>
<div className="stats w-full text-blue-600 md:w-1/2 mt-4">
<h2 className="text-xl text-red-600 font-medium mb-3">Selected Country:</h2>
<h2 className='text-yellow-600 mb-4 bg-gray-200'>{selectedCountry}</h2>
<p className="stat">Confirmed Cases: {stats.confirmed}</p>
<p className="stat">Deaths: {stats.deaths}</p>
<p className="stat">Recoveries: {stats.recovered}</p>
</div>
</div>
控制台中的结果为:data : confirmed : 4563190 deaths : 50541 lastChecked : "2023-01-31T18:11:16+00:00" lastReported : "2023-01-31T04:20:32+00:00" location : "US" recovered : null
我也分享了这张图片:
请注意,我已经使用了自己的API密钥
1条答案
按热度按时间zxlwwiss1#
你的图像显示空白屏幕,这意味着你的开发服务器没有呈现任何东西。你有一个不同的错误,检查你的控制台。
如果你没有在控制台上有任何错误,你至少会得到这个没有数据值的html.(我样式值为红色)
在您代码中,您有
countries.map
。您可能有“Uncaught ReferenceError:未定义国家/地区”。如下所示:控制台错误的空白屏幕