Question

我正在尝试编写一个以2个城市的名字作为输入的程序，然后使用openweathermap API获取2个城市的温度。但是，我无法调用API。我尝试过一些教程，但有点令人困惑。如果有人可以帮助我连接API，获取城市的温度，并在屏幕上打印，我会很高兴。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import _ from 'lodash';
import Request from 'superagent';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {input1: '', input2: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  componentDidMount(){
      var city1 = this.state.input1;
      var url= 'http://api.openweathermap.org/data/2.5/weather?q={city1}&units=metric&APPID=83c6ba4dd07d83514536821a8a51d6d5';
      Request.get(url).then((response) => {
          this.setState({
              report: response.body.Search
          });
      });
  }

  handleSubmit(event) {
      var temperature = _.map(this.state.report, (city) => {
          return (<p>{city.main.temp}</p>);
      });

    event.preventDefault();
  }

  render() {
      return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
        <div className="container">
            <h1>Where Should I go?</h1>
            <form onSubmit={this.handleSubmit}>
            <div className="cityboxdiv">
                <input name="input1" type="text" id="tb1" className="citybox" onChange={this.handleChange} placeholder="Enter City1" autoFocus />
                <input name="input2" type="text" id="tb2" className="citybox" onChange={this.handleChange} placeholder="Enter City2"/>
            </div>
            <div className="btn-div">
                <button type="submit" className="sub-btn">Tell Me!</button>
            </div>
            </form>
        </div>
      </div>
    );
  }
}

export default App;

我想知道的两件事是如何将城市名称传递到网址，以便我们可以获取数据。一旦我们得到数据，我怎么才能只显示城市的温度值。

Answer 1

我看到你犯了几个错误。

请求API并将数据置于您应在handleSubmit内进行的状态（或更好地使用操作）。
在渲染方法中，您应该将状态数据输出为state.report.map(item => (<div>{city.main.temp}</div>))
使用模板字符串（https://docs.microsoft.com/en-us/scripting/javascript/advanced/template-strings-javascript）

从React中的openweather API获取数据

1 个答案: