如果API-URL无效，则React应用程序崩溃

Question

我正在尝试编写我的第一个React应用程序。在具有两个输入字段的表单中，用户在输入字段中键入国家/地区的名称并提交表单。然后将city和country变量传递给以下组件，该组件应该向openweatehrmap API发送API-Request并显示结果。

import React, { Component } from 'react';
import axios from 'axios';
import Form from './Form/Form';

class Weather extends Component {
  state = {
    country: '',
    city: '',
    currentTemp: '',
    error: undefined,
  }


  getWeather = async (e) => {
    e.preventDefault();
    const URL = 'http://api.openweathermap.org/data/2.5/weather?q='
    const API_KEY = "8b46d478a9...34a69";
    const country = e.target.elements.country.value;
    const city = e.target.elements.city.value;
    try {
      if (country && city) {
        const response = await 
axios.get(`${URL}${city},${country}&appid=${API_KEY}&units=metric`);
        const data = await response;
        console.log(data);
        this.setState({
          country: data.data.sys.country,
          city: data.data.name,
          currentTemp: data.data.main.temp,
          error: '',
        });
      } else {
        this.setState({
          country: undefined,
          city: undefined,
          currentTemp: undefined,
          error: 'Please enter a country and a city name'
        })
      }
    } catch (err) {
      this.setState({ error: err })
    }
  }


  render() {
    let showResult;
    if (this.state.error !== undefined && this.state.country && this.state.city) {
      showResult =
        <ul>
          <li>Location: {this.state.country} {this.state.city}</li>
          <li>Current Temperature: {this.state.currentTemp}° Celsius</li>
        </ul>
    }
    else {
      showResult = <div className="error">
        {this.state.error}
      </div>
    }

    return (
      <div>
        <Form onGetWeather={this.getWeather} />
        {showResult}
      </div>
    );
  }
}

export default Weather;

如果您让一个或两个输入字段为空并提交表单，则UI会显示错误。如果您填写两个输入字段并且国家/地区和城市相关（例如英国和伦敦），则UI会显示温度和其他一些信息。

但是，如果您只使用一些随机文本填写两个输入字段，或者国家和城市彼此不相关，则应用程序会在提交表单后立即崩溃。

我认为这是因为生成的API-URL不再有效。控制台显示以下错误：

我花了一整天，但我找不到办法解决它。如何避免应用程序崩溃。如何验证生成的API-URL？或任何其他提示或解决方案？

Answer 1

多谢你们。

我想我在阅读你的评论后设法解决了这个问题。我不得不将catch部分更改为：

catch (err) {
      if (err.response) {
        console.log(err.response.data);
        this.setState({ error: err.response.data.message });
      }
    };

你怎么看？

我的代码中还有其他内容可以改进吗？ （我确定有很多）