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

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

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>
    );
  }
}

import React，{Component}来自“React”；
导出类Home扩展组件{
建造师（道具）{
超级（道具）；
this.state={temp:，summary:，city:，location:，London}；
}
getData（）{
fetch（“api/weather/city/”+encodeURIComponent（this.state.location））
.then（response=>response.json（））
。然后（数据=>
这是我的国家({
temp:data.temp，
总结：data.summary，
城市：数据城市
})
);
}
render（）{
返回(
天气
请输入您所在的城市：

this.getData（）}>
this.setState（{location:e.target.value}）}
/>
提交
城市
{本州市}

温度
{this.state.temp}

描述
{this.state.summary}

);
}
}

每当我输入城市并按submit时，都不会显示API数据。但是，我已经测试了API调用，这是正确的。是否有人能够帮助我建议如何获取用户输入以更新

this.state.location

并显示该城市的天气

---

非常感谢

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

您应该使用

event.preventDefault

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

getData(e) {
    e.preventDefault()

this.getData（e）}>
getData（e）{
e、 预防默认值（）

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

---

希望有帮助！！！

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

温度必须取自：data.main.temp

摘要必须取自：data.weather[0]。说明

正如评论中所建议的，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}>

为什么要使用encodeURIComponent？只需使用this.state.location。由于openweather api如下所示，api.openweathermap.org/data/2.5/weather？q=London。名称就足够了。代码应该可以正常工作。您在控制台中看到任何错误吗？请尝试将所选输入值从jsx本身传递给getdata函数，或者尝试使用ComComponent更新函数Hi，@juemura7正如我在回答中提到的（如果api是openweathermap.org）Hi@SuleymanSah一样，您的映射也需要更正-非常感谢，它实际上可以工作，因为我在后端代码中调用了api，前端的调用是调用我的C#方法