reactjs 获取的数据不显示在React中

bqjvbblv  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(160)

我正在尝试从这个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密钥

zxlwwiss

zxlwwiss1#

你的图像显示空白屏幕,这意味着你的开发服务器没有呈现任何东西。你有一个不同的错误,检查你的控制台。

如果你没有在控制台上有任何错误,你至少会得到这个没有数据值的html.(我样式值为红色)
在您代码中,您有countries.map。您可能有“Uncaught ReferenceError:未定义国家/地区”。如下所示:控制台错误的空白屏幕

相关问题