解析 React JS 天气 APP 中的搜索查询和 API 调用答案

【问题标题】：Resolving search query & API call in ReactJS weather APP解析 React JS 天气 APP 中的搜索查询和 API 调用
【发布时间】：2020-02-25 15:39:16
【问题描述】：

我有这个操作，现在只是空白.. 只是试图通过城市名称搜索 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}
        />

【问题讨论】：

标签： reactjs api search city

【解决方案1】：

getWeatherData 是否必须存在于 componentDidMount() 中？

我知道你为什么要这样做，你想在它挂载后调用函数 getWeatherData。但是您的组件是基于类的，因此您可以使用 this.getWeatherData() 轻松实现该功能

一样，

也 handleSearch = () 可能需要一个参数

希望有帮助

【讨论】：