React天气应用中如何实现表单组件与WeatherApp组件的数据传递

嘿，我看了你的代码，发现几个小调整就能让表单和WeatherApp组件顺利完成数据传递啦，咱们一步步来：

1. 正确引入并传递Form组件 #

你在WeatherApp里把Form组件注释掉了，首先要把它加回来，并且把定义好的handleQueryChange方法作为props传给Form——因为你的Form组件接收的props就是handleQueryChange，不是onSubmit。修改WeatherApp里的这段：

<div className="formContainer">
  <Form handleQueryChange={handleQueryChange} /> {/* 去掉注释，传对props */}
</div>

2. 修正handleQueryChange函数的逻辑 #

你现在的handleQueryChange里写的是setQuery(data.location.name)，但Form组件传过来的是用户输入的城市名称字符串，不是接口返回的data对象，所以这里直接把传入的城市名赋值给query就行：

const handleQueryChange = (city) => {
  setQuery(city); // 直接把用户输入的城市设为query
}

3. 修复useEffect的无限循环问题 #

你当前的useEffect依赖的是data，这会导致无限循环：每次fetch数据后setData更新data，触发useEffect再次fetch，周而复始。我们需要把依赖改成query——只有当用户输入新城市，query发生变化时，才去请求天气数据：

useEffect(()=>{
  const fetchWeatherData = async () => {
    try {
      const response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=95f0ddb3a06a4a358cf223933242311&q=${query}&days=10&aqi=yes&alerts=no`);
      const result = await response.json();
      setData(result);
      console.log(result);
    } catch (error) {
      console.error("Error fetching weather data:", error);
    }
  };
  fetchWeatherData();
}, [query]); // 把依赖从data改成query

4. 确认Form组件的逻辑没问题 #

你的Form组件已经写得很对了：用useState管理输入的城市名，handleChange更新state，handleSubmit阻止默认提交行为并调用父组件传过来的handleQueryChange传递城市名，这部分不用改~

这样调整后，用户在表单输入城市点击提交，城市名就会传递到WeatherApp的query状态，触发useEffect重新请求对应城市的天气数据，最终更新到data状态里，后续的Home等组件就能拿到最新的天气信息啦！

备注：内容来源于stack exchange，提问作者Azongo Ismail