在 React/.NET 中调用 Weather API - 如何在 API 调用中将表单的值设置为城市答案

【问题标题】：Calling a Weather API in React/.NET - how to set the value of a form to the city in the API call在 React/.NET 中调用 Weather API - 如何在 API 调用中将表单的值设置为城市
【发布时间】：2019-09-13 10:43:15
【问题描述】：

我正在创建一个对 OpenWeather API 进行 API 调用的 React / .NET 应用程序。当我在城市的位置硬编码时，它工作得很好。但是，我希望用户能够将他们当前的城市输入到表单中，按提交，并更新天气详细信息。这是我当前的代码：

import React, { Component } from "react";

export class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { temp: "", summary: "", city: "", location: "London" };
  }

  getData() {
    fetch("api/weather/city/" + encodeURIComponent(this.state.location))
      .then(response => response.json())
      .then(data =>
        this.setState({
          temp: data.temp,
          summary: data.summary,
          city: data.city
        })
      );
  }

  render() {
    return (
      <div>
        <center>
          <h1>Weather</h1>
          <p>Please enter your city:</p>
          <form onSubmit={() => this.getData()}>
            <input
              type="text"
              placeholder="Type city here..."
              value={this.state.location}
              onChange={e => this.setState({ location: e.target.value })}
            />
            <button type="submit">Submit</button>
          </form>
          <h4>City</h4>
          <p>{this.state.city}</p>
          <h4>Temperature</h4>
          <p> {this.state.temp}</p>
          <h4>Description</h4>
          <p> {this.state.summary}</p>
        </center>
      </div>
    );
  }
}

每当我输入城市并按提交时，都不会显示任何 API 数据。但是，我已经测试了 API 调用，并且可以正常工作。有没有人可以帮助建议我如何获取用户的输入以更新 this.state.location 并显示该城市的天气？

非常感谢。

【问题讨论】：

你为什么使用encodeURIComponent？只需使用 this.state.location。由于openweather api如下，api.openweathermap.org/data/2.5/weather?q=London。名字就足够了
代码原样应该工作。您在控制台中看到任何错误吗？
尝试将选定的输入值从 jsx 本身传递给 getdata 函数或尝试 Comoponentonupdate 函数

标签： .net reactjs api

【解决方案1】：

即使您的 api 给出了正确的结果，由于本机浏览器提交功能，页面也会刷新。

你应该避免使用event.preventDefault提交时默认刷新

<form onSubmit={(e) => this.getData(e)}>

getData(e) {
    e.preventDefault()

如果发生任何其他错误，请告诉我。

希望对你有帮助！！！

【讨论】：

嗨，@juemura7 您的映射也需要更正，正如我在回答中提到的（如果 api 是 openweathermap.org ）
嗨@SuleymanSah - 非常感谢，虽然我在后端代码中调用了API，而前端调用正在调用我的C#方法，但它确实有效

【解决方案2】：

您似乎从 api 结果中映射了错误的值。

temp 必须取自：data.main.temp

摘要必须取自：data.weather[0].description

正如 cmets 中所建议的，encodeURIComponent 看起来没有必要。

您的 getData 函数必须是这样的。我添加了 e.preventDefault();并更正了映射。

  getData = (e) => {
   e.preventDefault();
     fetch("api/weather/city/" + encodeURIComponent(this.state.location))
      .then(response => response.json())
      .then(data =>
        {
         this.setState({
          temp: data.main.temp,
          summary: data.weather[0].description,
          city: data.name
        })
        }
      ).catch(err => console.log("err:", err));
  }

formSubmit 行可以改为：

 <form onSubmit={this.getData}>

【讨论】：