在本机反应中，每个文本输入多次获取

Question

所以基本上我正在构建一个响应原生的天气应用程序，并将天气 API 用于天气 API。所以基本上我的问题是什么：假设我搜索了纽约的天气，它给了我 80F，我搜索了达拉斯的天气，但它给了我与纽约天气相同的详细信息。

我知道我的 API 被调用了一次，但是如何根据我的 textinput 更改多次调用我的 API？ 代码如下：

constructor(props) {
super(props);
this.state = {
  weatherText: "Enter",
  isLoading: true,
  locationData: [],
  currentData: []
};

}

componentDidMount(){
   this.apiCALL()
 }



apiCALL(){
     return fetch(
       `http://api.weatherapi.com/v1/current.json?key=???&q=${this.state.weatherText}`//I took out the key on purpose.
     )
       .then((response) => response.json())
       .then((responseJson) => {
         this.setState({
           isLoading: false,
           locationData: responseJson.location,
           currentData: responseJson.current,
         });
       })
       .catch((error) => {
         console.log(error);
       });
  }

注意：我故意取出了 API 的密钥。

那么我怎样才能做到这一点。就像我之前说的，当 Textinput 发生变化时，如何调用 API？ 我应该使用ComponentDidMount 还是有其他一些内置函数/方法来实现这一点？

Answer 1

不要在 componentDidMount 上调用 api，而是在文本输入更改时或在文本输入旁边的提交按钮上调用它。
假设你有TextInput，使用

<TextInput placeholder="eg. New York" onChange={(val)=>this.apiCALL(val)}/>

并将apiCALL修改为

apiCALL(city){
  return fetch(
    `http://api.weatherapi.com/v1/current.json?key=???&q=${city}`//I took out the key on purpose.
  )
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        locationData: responseJson.location,
        currentData: responseJson.current,
      });
    })
    .catch((error) => {
      console.log(error);
    });
}

现在这个功能是可重复使用的，可用于所有城市。