在ReactJS weather APP中解决搜索查询和API调用

Question

我进行了此操作，现在只是消隐。仅尝试通过城市名称搜索weatherBit API以下数据是我的onChange和handleSearch（来自子onClick）函数...

下面是我的App.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}
        />

Answer 1

getWeatherData是否必须驻留在componentDidMount（）中？