React调用OpenWeatherMap API无返回无限加载且无控制台报错问题

1 加载状态判断逻辑错误 #

你将data初始化为空对象，而JS中对象不存在length属性，data.length永远返回undefined，因此!data.length的结果恒为真，无论API是否返回数据，页面都会一直显示加载状态。

2 无请求错误捕获逻辑 #

当前fetch调用未配置错误捕获分支，一旦请求出现异常（如协议错误、密钥失效、跨域限制），不会在控制台抛出报错，无法感知请求失败的情况。

3 其他潜在问题 #

OpenWeatherMap当前已强制要求API请求使用HTTPS协议，你代码中使用的HTTP请求会被浏览器混合内容策略拦截，导致请求无返回。

修复后代码示例 #

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 [loading, setLoading] = useState(true);
  const [data, setData] = useState({});

  useEffect(() => {
    // 请求地址改为HTTPS协议
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=Cinisi&units=metric&appid=${API_KEY}`)
      .then(resp => {
        // 提前判断请求响应状态
        if(!resp.ok) throw new Error('请求异常，状态码：' + resp.status)
        return resp.json()
      })
      .then(dataRecived => {
        setData(dataRecived);
        setLoading(false);
      })
      // 新增错误捕获，控制台可直接查看异常信息
      .catch(err => {
        console.error('API调用失败：', err)
        setLoading(false)
      });
  }, []);

  // 用独立的loading状态做渲染判断
  return loading ?
    <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;

内容的提问来源于stack exchange，提问作者Saverio Randazzo