时间戳

首页 > 解决方案 > API 调用似乎在 React 中不起作用

java - API 调用似乎在 React 中不起作用

问题描述

我正在构建一个天气 webapp 使用 React 和openweathermap.org api。直到昨天，一切都在朝着正确的方向发展。今天我继续编写代码，但 API 调用没有产生任何结果（根据我在下面的代码中的操作，我得到了无限加载）。我不明白问题出在哪里，也是因为自上次工作以来我没有更改代码，而且我在浏览器的控制台部分没有收到任何错误。

这里的代码：

import './App.css';
import React, { useState, useEffect } from 'react';

import NavBar from '../Components/NavBar/NavBar';
import CurrentData from '../Components/CurrentData/CurrentData';
import HourlyForecast from '../Components/HourlyForecast/HourlyForecast';
import Details from '../Components/Details/Details';
import DailyForecast from '../Components/DailyForecast/DailyForecast';

import 'tachyons';

const App = () => {

  const API_KEY = `my api key`;

  const [searchField, setSearchField] = useState('');
  const [data, setData] = useState({});

  useEffect(() => {
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=Cinisi&units=metric&appid=${API_KEY}`)
      .then(resp => resp.json())
      .then(dataRecived => setData(dataRecived));
  }, []);

  return !data.length ?
    <h1>Loading...</h1> :
  (
    <React.Fragment>
    <NavBar />
    <CurrentData 
      name={data.name}
      country={data.sys.country}
      temp={data.main.temp}
      time={data.dt}
      desc={data.weather[0].description}
    />
    <HourlyForecast />
    <Details />
    <DailyForecast />
    </React.Fragment>
  );      
}

export default App;

我感谢任何提前给我答案的人

标签： javahtmlcssreactjsapi

解决方案

更新。我找到了解决方案，我最初将数据挂钩设置为null：

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

和这个条件：

return !data ....

推荐阅读