Разрешение поискового запроса и вызова API в ReactJS приложении погоды - PullRequest
Новая
       36

Разрешение поискового запроса и вызова API в ReactJS приложении погоды

0 голосов
/ 25 февраля 2020

У меня была эта операционная система, теперь просто отключается .. Просто пытаюсь найти weatherBit API по названию города для данных ниже, это мои onChange и handleSearch (из дочерних onClick) функции ...

Ниже мое приложение. js компонент. заранее спасибо. 

    constructor(props) {
    super(props)
    this.state = {
      response: [],
      inputVal: ""
    }
  }

  handleSearch = () => {
    getWeatherData(this.state.inputVal) //(call getWeatherData function from below)
  }

  componentDidMount() {
    getWeatherData = inputVal => {
      fetch(
        "https://api.weatherbit.io/v2.0/current?city=Seattle,WA&key=168c5cb818e74abd926a9d65d285d48f"
      )
        .then(res => res.JSON())
        .then(data => {
          this.setState({ response: data })
          console.log(data)
        })
    }

    //handleChange from WeatherQuery input:
    handleOnChange = e => {
      this.setState({ inputVal: e.target.value })
    }
  }

  render() {
    return (
      <div className="container">
        <WeatherQuery
          handleChange={this.state.handleChange}
          handleSearch={this.state.handleSearch}

    )
  }
}
export default App

это мой вклад от дочернего компонента -> 

<input
          onChange={event => 
     this.props.handleChange(event)}
          name="text"
          type="text"
          placeholder=""
          value={this.state.inputVal}
        />

1 Ответ

0 голосов
/ 25 февраля 2020

должен ли getWeatherData жить внутри componentDidMount ()?

Я знаю, почему вы делаете это, вы хотите вызвать функцию getWeatherData после ее монтирования. Но ваш компонент основан на классах, поэтому вы можете легко использовать функцию с помощью this.getWeatherData ()

То же самое,

ТАКЖЕ handleSearch = () может потребоваться параметр

Надеюсь, что поможет

...