React中useState未替换原有状态：搜索结果追加而非覆盖问题

你遇到的问题是因为搜索完成后设置了page=1，触发了依赖page的useEffect，而这个useEffect里的逻辑是把新获取的产品追加到现有列表中——也就是说，你先把products设为搜索结果，紧接着useEffect又把第一页的初始产品追加了进去，最终列表变成了「搜索结果 + 初始第一页产品」，看起来像是搜索结果被追加到初始列表里了。

核心思路是让搜索状态下，初始加载的useEffect不执行。我们可以添加一个状态标记当前是否处于搜索模式：

1. 添加搜索状态标记 #

在组件里新增一个状态：

const [isSearching, setIsSearching] = useState(false);

2. 修改搜索逻辑 #

在handleSearch里标记进入搜索模式，确保后续useEffect不会触发初始加载：

const handleSearch = async () => {
  console.log('Searching for products with query:', searchQuery);
  try {
    setIsSearching(true); // 进入搜索模式
    const data = await searchProducts(searchQuery);
    setProducts(data.products);  
    setPage(1); // 此时即使触发useEffect，也会被拦截
  } catch (err) {
    console.error('Error searching for products:', err);
  }
};

3. 拦截初始加载的useEffect #

在useEffect开头判断，如果处于搜索模式，直接返回不执行初始加载逻辑：

useEffect(() => {
  if (isSearching) return; // 搜索状态下跳过初始加载
  const loadProducts = async () => {
    console.log('Fetching products for page:', page);
    try {
      const data = await fetchProducts(page, limit);
      console.log('Fetched products:', data);
      setProducts(prevProducts => [...prevProducts, ...data.products]);
    } catch (err) {
      console.error('Error fetching products:', err);
    }
  };
  loadProducts();
}, [page, limit, isSearching]); // 把isSearching加入依赖数组

4. 可选：清空搜索时重置状态 #

如果需要在清空搜索框时恢复初始加载的产品，可以加一个监听searchQuery的useEffect：

useEffect(() => {
  if (!searchQuery.trim()) {
    setIsSearching(false);
    setProducts([]);
    setPage(1); // 触发初始加载第一页产品
  }
}, [searchQuery]);

这样修改后，搜索结果就会完全替换初始加载的产品，不会出现追加的情况了。

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