如何用IF语句避免Weather API因城市名错误崩溃并解决无结果问题

核心问题 #

你当前的渲染逻辑完全失效，因为dataSearch只是handleSearchLocation函数的局部参数，并非App组件的状态变量，所以在JSX里访问typeof dataSearch === "undefined"永远为真，导致结果组件始终不渲染。同时你的API请求没有错误处理，空输入或无效城市会返回错误响应，但你直接存到状态里，可能导致子组件崩溃。

修复步骤 #

1. 添加必要的状态变量：管理搜索关键词、API错误状态
2. 完善API请求逻辑：处理空输入、响应错误、网络异常
3. 调整渲染条件：基于有效数据或错误状态展示内容

修改后的完整代码 #

import React, { useState } from "react";
import { Api } from "./Api";
import { Container, Alert } from "react-bootstrap";
import {
  Search,
  CurrentWeather,
  ForecastWeather,
  Footer,
} from "./components/index";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [weatherData, setWeatherData] = useState(null);
  const [forecastData, setForecastData] = useState(null);
  const [apiError, setApiError] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearchLocation = (dataSearch) => {
    // 处理空输入
    if (!dataSearch.trim()) {
      setApiError("请输入有效的城市名称");
      setWeatherData(null);
      setForecastData(null);
      setSearchQuery('');
      return;
    }

    setApiError(null);
    setSearchQuery(dataSearch);

    const weatherDataFetch = fetch(
      `${Api.url}/weather?q=${dataSearch}&units=metric&appid=${Api.key}`
    );
    const forecastDataFetch = fetch(
      `${Api.url}/forecast?q=${dataSearch}&units=metric&appid=${Api.key}`
    );

    Promise.all([weatherDataFetch, forecastDataFetch])
      .then(async (responses) => {
        const weatherRes = responses[0];
        const forecastRes = responses[1];

        // 检查响应是否成功
        if (!weatherRes.ok || !forecastRes.ok) {
          const weatherErr = await weatherRes.json();
          const forecastErr = await forecastRes.json();
          throw new Error(weatherErr.message || forecastErr.message || "获取天气数据失败");
        }

        const weatherResponse = await weatherRes.json();
        const forecastResponse = await forecastRes.json();

        setWeatherData(weatherResponse);
        setForecastData(forecastResponse);
      })
      .catch((err) => {
        setApiError(err.message);
        setWeatherData(null);
        setForecastData(null);
      });
  };

  return (      
    <div className="App">
      <div className="contentApp">
        <Container>
          <Search
            searchResultData={handleSearchLocation}
            textPlaceholder="Search for a place..."
          />
          
          {/* 显示错误提示 */}
          {apiError && (
            <Alert variant="danger" className="mt-3">
              {apiError}
            </Alert>
          )}

          {/* 当有有效数据时渲染天气组件 */}
          {weatherData && forecastData && (
            <>
              <CurrentWeather resultData={weatherData} />
              <ForecastWeather resultData={forecastData} />
            </>
          )}

          {/* 当有搜索记录但无数据时提示加载状态 */}
          {searchQuery && !weatherData && !apiError && (
            <Alert variant="info" className="mt-3">
              正在加载天气数据...
            </Alert>
          )}

          <Footer />
        </Container>
      </div>     
    </div>
  );
}

export default App;

关键修改说明 #

• 状态管理：新增searchQuery记录用户输入的关键词，apiError存储请求错误信息，用于UI提示
• 输入校验：在请求前先检查输入是否为空，避免无效API调用
• 错误处理：检查响应的ok状态，捕获请求失败或API返回的错误，设置错误状态并清空无效数据
• 渲染逻辑：
  • 优先显示错误提示
  • 仅当weatherData和forecastData都存在时，渲染天气组件
  • 有搜索记录但未返回数据时，显示加载提示

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