React自定义国家选择Hook出现无限循环，求优化方案

你的代码出现无限循环的核心原因是：在Hook的顶层直接调用setCountries。每次组件渲染时都会执行这个Hook，调用setCountries会触发组件重新渲染，重新渲染又会再次执行Hook并调用setCountries，形成无限循环。

优化方案 #

方案1：仅初始化时过滤（适用于默认值固定的场景） #

如果defaultCountries和defaultCountry是固定不变的，直接把过滤逻辑放到useState的初始值中，这样只会在Hook首次执行时计算一次，避免重复更新：

const { useState } = require("react");

const useCountrySelect = (defaultCountries, defaultCountry) => {
  // 初始值直接传入过滤后的结果
  const [countries, setCountries] = useState(() => {
    return defaultCountries.filter(country => country !== defaultCountry);
  });

  return [countries, setCountries];
};

export default useCountrySelect;

方案2：响应默认值变化（适用于默认值可能动态更新的场景） #

如果defaultCountries或defaultCountry会动态变化，需要用useEffect监听依赖变化，仅当依赖更新时才重新过滤并更新countries：

const { useState, useEffect } = require("react");

const useCountrySelect = (defaultCountries, defaultCountry) => {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    // 仅当defaultCountries或defaultCountry变化时执行过滤
    const filteredCountries = defaultCountries.filter(country => country !== defaultCountry);
    setCountries(filteredCountries);
  }, [defaultCountries, defaultCountry]); // 依赖数组控制执行时机

  return [countries, setCountries];
};

export default useCountrySelect;

使用说明 #

两种方案的使用方式和你原来的示例保持一致：

const [country] = useCountrySelect(["lv", "ee", "lt"], "lt");
console.log(country); // 输出 ["lv", "ee"]

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