React中按下Enter仅执行searchByName，避免触发useEffect的方法

问题核心是未区分初始加载和搜索状态，导致首次搜索后useEffect意外触发loadProducts，引发重复请求。以下是针对性修改方案：

1. 新增搜索状态标记 #

添加状态变量标记当前是否处于搜索模式：

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

2. 更新searchByName函数 #

搜索时切换搜索状态，明确区分搜索与非搜索场景的逻辑：

const searchByName = async (e) => {
  if (e.key === "Enter") {
    if (search !== "") {
      setIsSearching(true); // 进入搜索模式
      try {
        const res = await axiosInstance.get(`products/search?q=${search}`);
        setProducts(res.data);
      } catch (err) {
        console.error('搜索失败:', err);
      }
    } else {
      setIsSearching(false); // 退出搜索模式
      setProducts([]); // 清空现有数据
      loadProducts(); // 重新加载初始商品
    }
  }
};

3. 限制useEffect的执行条件 #

让useEffect仅在非搜索状态下执行加载逻辑：

useEffect(() => {
  if (!isSearching) { // 搜索状态下跳过初始加载
    loadProducts();
  }
}, [page, isSearching]); // 将isSearching加入依赖数组

4. 优化loadProducts的状态更新逻辑 #

确保初始加载（分页）和搜索的状态更新不冲突：

const loadProducts = async () => {
  try {
    const res = await axiosInstance.get(`products/${page}`);
    setProducts((prev) => {
      // 第一页直接替换数据，后续分页追加数据
      return page === 1 ? res.data : [...prev, ...res.data];
    });
  } catch (err) {
    console.error('加载商品失败:', err);
  }
};

修改后，首次按下Enter键时会进入搜索模式，useEffect因isSearching为true跳过loadProducts执行，仅发起一次搜索请求；清空搜索框按Enter则退出搜索模式，恢复初始加载逻辑。

内容的提问来源于stack exchange，提问作者Captai-N