在React/.NET中调用天气API -如何在API调用中将窗体的值设置为城市

import React, { useState } from 'react';

const WeatherForm = () => {
  const [city, setCity] = useState('');

  const handleInputChange = (event) => {
    setCity(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 在这里进行API调用，并将窗体的值设置为城市
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={city} onChange={handleInputChange} />
      <button type="submit">获取天气</button>
    </form>
  );
};

export default WeatherForm;

const handleSubmit = (event) => {
  event.preventDefault();

  // 使用fetch或axios发送HTTP请求到天气API
  fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`)
    .then((response) => response.json())
    .then((data) => {
      // 处理API响应数据
      // 将窗体的值设置为城市
    })
    .catch((error) => {
      console.error('API请求错误:', error);
    });
};

.then((data) => {
  // 处理API响应数据
  setCity(data.location.name);
  // 其他处理逻辑...
})