Javascript 通过表单onSubmit响应API响应

我正在尝试使用用户的输入进行API调用，并存储响应以显示它。
我正在采取的步骤：

通过

onChange=“handleLocationChange”

通过表单的

onSubmit={this.handleSubmit}

然后调用constweatherdata=GetAPIData（API_键，this.state.cityID）以获取API数据

在GetAPIData组件中，我创建hook

const[weatherData，setWeatherData]=useState（[]）

我违反了钩子规则（我相信我的错误是在渲染后尝试调用钩子），并得到以下错误，但我还没有找到解决此错误的方法：

未捕获错误：钩子调用无效。钩子只能在函数组件的主体内部调用

类组件（主文件）

---

解决方案是否与必须重新呈现类组件以使钩子工作有关？如何使API响应顺利通过而不出错？错误来自GetAPIData函数。它不是一个功能组件。组件应该从代码中返回一个元素（JSX或React.createElement）。GetAPIData函数返回的只是dataReact钩子，它仅在功能组件的主体或其他React钩子中有效。如果

GetAPIData

是一个自定义钩子，那么在基于类的组件中使用它是无效的。如果它是一个组件，那么它就不能作为函数调用，它需要在JSX中呈现并正确接收props对象并返回有效的JSX。

import GetAPIData from "./GetAPIData";

class IOData extends Component {
  constructor(props) {
    super(props);

    this.state = {
      country: "",
      city: "",
      cityID: "",
      APIData: "",
    };
  }

  handleLocationChange = (event) => {
    this.setState({
      city: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const API_KEY = "*insert key value*";
    this.setState({cityID: "6533961"}); // I think this is also incorrect since it is an event
    const response = GetAPIData(API_KEY, this.state.cityID);
    this.setState({APIData: response});
  };

  render() {
    const { country, city } = this.state;
    return (
      <div>
          <form onSubmit={this.handleSubmit}>
              <label>City:</label>
              <input
                type="text"
                name="city"
                value={city}
                onChange={this.handleLocationChange}
              />
            <button type="submit">Go!</button>
          </form>
{APIData}
      </div>
    );
  }
}

const GetAPIData = (API_KEY, cityID) => {
  const [weatherData, setWeatherData] = useState([]); // I believe it breaks here
  const endpoint = `http://api.openweathermap.org/data/2.5/weather?id=${cityID}&appid=${API_KEY}`;
  
  useEffect(() => {
    fetch(endpoint)
      .then(response => response.json())
      .then(data => {
        setWeatherData(data);
        })
  }, [])

  return weatherData;
};