openweather API에서 데이터를 가져옴

Question

두 도시의 이름을 입력으로 사용하고 openweathermap API를 사용하여 두 도시의 온도를 구하는 프로그램을 작성하려고합니다. 그러나 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; 

두 가지 우리가 데이터를 얻을 수 있도록 URL로 도시 이름을 전달하는 방법이다. 데이터를 얻은 후에 도시의 온도 값만 표시하려면 어떻게해야합니까?

Answer 1

몇 가지 실수를하는 경우가 있습니다.

1. API에 요청하고 데이터를 넣으려면 handleSubmit (또는 더 나은 조치 사용)을 입력해야합니다.
2. 는 당신이 출력해야 state.report.map(item => (<div>{city.main.temp}</div>))
3. 같은 상태 데이터는 템플릿 문자열 (https://docs.microsoft.com/en-us/scripting/javascript/advanced/template-strings-javascript)

를 사용하여 만들 수있는 URL을 생성하는 방법을 렌더링