Question

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

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会显示错误。如果您同时填写两个输入字段，并且国家和城市（例如英国和伦敦）是相关的，则用户界面会显示温度和其他一些信息。

但是，如果您在两个输入字段中仅填写了一些随机文本，或者国家和城市之间没有关联，则提交表单后，应用就会崩溃。

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

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

Answer 1

谢谢大家。

我认为在阅读您的评论后，我设法将其修复。我必须将捕获部分更改为此：

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

你怎么看？

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

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

1 个答案: