React函数组件如何保存并展示最近5次search值供API调用

核心改动点 #

• 新增专门存储搜索历史的useState，初始值包含默认搜索词Dehradun，限制数组最大长度为5
• 修复原代码中重复发起fetch请求的冗余逻辑
• 每次搜索请求完成后更新历史数组：新搜索词置顶、自动去重、仅保留最近5条
• 遍历历史数组即可直接渲染展示，点击历史项可快速触发对应城市的天气查询

完整实现代码 #

import { useState, useEffect } from 'react';

export default function WeatherComponent() {
  const [city, setCity] = useState(null);
  const [search, setSearch] = useState("Dehradun");
  // 新增搜索历史状态，最多存5条，初始值带上默认搜索城市
  const [searchHistory, setSearchHistory] = useState(["Dehradun"]);

  useEffect(() => {
    const fetchApi = async () => {
      // 空搜索值直接拦截不发起无效请求
      if (!search.trim()) return;
      
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`
      try {
        const response = await fetch(url);
        const resJson = await response.json();
        // 请求成功才更新城市数据和历史记录
        if (resJson.main) {
          setCity(resJson.main);
          // 更新搜索历史：新值放最前，自动去重，截取前5条
          setSearchHistory(prev => {
            const newHistory = [search, ...prev.filter(item => item !== search)];
            return newHistory.slice(0, 5);
          });
        }
      } catch (err) {
        console.error('天气查询失败:', err);
      }
    };
    fetchApi();
  }, [search])

  return (
    <div className="weather-container">
      {/* 搜索输入区域示例，可根据原有业务逻辑调整 */}
      <input 
        type="text" 
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="输入城市名查询天气"
      />

      {/* 原有天气信息展示逻辑保留 */}
      {city && (
        <div className="weather-info">
          <p>当前温度: {city.temp}°C</p>
          <p>体感温度: {city.feels_like}°C</p>
          <p>湿度: {city.humidity}%</p>
        </div>
      )}

      {/* 最近5条搜索历史渲染区域 */}
      <div className="search-history">
        <p>最近搜索:</p>
        <ul>
          {searchHistory.map((item) => (
            <li 
              key={item}
              onClick={() => setSearch(item)}
              style={{cursor: 'pointer', margin: '4px 0'}}
            >
              {item}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

逻辑说明 #

• 历史更新逻辑放在请求成功后执行，避免请求失败的无效搜索词占用历史位置
• 去重逻辑保证同一个城市不会重复出现在历史列表里，重复搜索同一个城市会自动置顶
• 点击历史项直接调用setSearch传入对应城市名，会自动触发useEffect重新拉取对应城市天气，不需要额外编写请求逻辑
• 数组用slice(0,5)截断，永远只保留最新的5条搜索记录，不会出现长度溢出问题

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