React Hooks调用天气API删除城市时报filter不是函数的问题求助

• 核心错误：filter是JavaScript数组专属方法，你父组件中weather状态初始值为对象类型useState({})，调用接口后也直接把返回的单个城市气象对象赋值给weather，对象类型不存在filter方法，调用就会触发该报错。
• 逻辑偏差：现有代码逻辑只能存储单个城市的气象数据，没有多城市列表的存储场景，不需要用filter做筛选删除。

方案1：保留单城市查询能力，点击X清空当前数据 #

不需要修改现有状态结构，仅调整子组件的删除逻辑即可：

1. 修改子组件DataWeather的handleRemoveItem方法：

const handleRemoveItem = () => {
  // 直接将weather重置为空对象
  setWeather({});
};

2. 调整span的点击事件绑定，无需传递id参数：

<span onClick={handleRemoveItem}>
  x
</span>

方案2：支持多城市查询存储，点击X删除指定城市 #

如果需要保留所有查询过的城市数据，需调整父组件的状态结构和赋值逻辑：

1. 修改父组件WeatherData的状态初始化：

// 初始值改为数组，存储多个城市的气象数据
const [weatherList, setWeatherList] = useState([]);

2. 修改接口请求成功后的赋值逻辑，将新查询到的城市数据追加到数组中（可自行添加去重逻辑避免重复添加同一城市）：

const FetchData = async (e) => {
  e.preventDefault();
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/forecast?q=${query},&appid=${YOU_API}`
    );
    const weatherData = await response.json();
    // 新数据追加到数组末尾
    setWeatherList(prev => [...prev, weatherData]);
    // 清空查询输入框
    setQuery('');
  } catch (err) {
    console.log(err);
  }
};

3. 修改父组件渲染逻辑，遍历数组渲染多个城市卡片：

{weatherList.length > 0 ? (
  weatherList.map(weather => <DataWeather key={weather.city.id} weather={weather} setWeather={setWeatherList} />)
) : (
  <h3>请输入城市名称</h3>
)}

4. 修改子组件DataWeather的删除逻辑，用城市id做筛选：

const handleRemoveItem = () => {
  setWeather((prevList) => prevList.filter((city) => city.city.id !== weather.city.id));
};

额外提示：OpenWeatherMap的forecast接口返回的list字段是未来多天的预报数组，你当前代码中直接写weather.list.main.temp_min会报错，需要指定数组下标，比如取第一条预报数据可以写为weather.list[0].main.temp_min。

内容的提问来源于stack exchange，提问作者Sami