Dispatch Redux Action后SearchProducts组件search状态为空问题排查

问题核心原因 #

你的SearchProducts组件中，input元素设置了key={search_${search}}这个动态key。每当search状态变化时，React会判定这是一个全新的DOM元素，会销毁旧的input组件并重新创建，导致组件内部的search状态被重置为空值——这就是执行dispatch后search变为空的根本原因。

其他潜在问题优化点 #

1. ProductList组件的导入与调用不一致
   你导入了fetchProductInfo，但useEffect里调用的是fetchProducts()，属于笔误，会导致初始数据加载失败，需要修正为匹配的action函数。

2. 防抖逻辑的冗余与依赖优化
   目前的防抖逻辑中，seacrhClick（拼写错误，应为searchClick）的useCallback依赖search，而useEffect又依赖search，可以简化逻辑：给useCallback添加dispatch依赖（dispatch本身是稳定的，不会引发额外渲染），同时让useEffect依赖searchClick，避免重复创建定时器。

修复代码示例 #

修改SearchProducts组件 #

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch } from "react-redux";
import { searchProducts } from "../../store/features/productsSlice";

const SearchProducts = (props) => {
  const [search, setSearch] = useState("");
  const dispatch = useDispatch();

  // 修正拼写错误，添加dispatch依赖
  const searchClick = useCallback(() => {
    if(search.length > 0){
      dispatch(searchProducts(search));
    }
  }, [search, dispatch]);

  useEffect(() => {
    let timerID = setTimeout(() => {
      searchClick();
    }, 1000);
    return () => {
      clearTimeout(timerID);
    };
  }, [searchClick]); // 依赖改为searchClick，避免重复创建定时器

  return (
    <div className="container">
      {/* 移除动态key，避免组件重建 */}
      <input
        className="w-50 form-control"
        type="text"
        name="search"
        autoFocus
        value={search || ''}
        placeholder="Search Products"
        onChange={(e) => {
          setSearch(e.target.value);
        }}
      />
    </div>
  );
};

export default SearchProducts;

修正ProductList组件的笔误 #

// 导入正确的action
import {
  fetchProducts, // 替换fetchProductInfo为实际的action
} from "../../store/features/productsSlice";

// ...其他代码不变
useEffect(() => {
  dispatch(fetchProducts());
}, [dispatch]); // 添加dispatch依赖，符合hooks规则

关键修复说明 #

• 移除input的动态key：让React复用同一个input组件，保证state不会被重置。
• 修正防抖逻辑的依赖：让useEffect依赖searchClick，避免每次search变化都重新创建定时器逻辑。
• 补全hooks依赖：给useEffect添加dispatch依赖，符合React Hooks的规则，避免潜在的警告和bug。

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