React中useEffect空依赖执行两次致数组重复添加元素问题

原因 #

1. React 18开发模式StrictMode的默认行为：React 18在开发环境下，StrictMode会强制触发两次挂载阶段的副作用（挂载→卸载→重新挂载），用来检测内存泄漏、非幂等操作等潜在问题。你的空依赖useEffect因此被执行了两次。
2. 状态更新逻辑缺陷：你通过循环多次调用setCurrencies(prev => [...prev, k])，这种基于前一次状态追加的方式，在useEffect第二次执行时，会把相同的货币key再次加入数组，最终导致重复。
3. 依赖数组遗漏：useEffect内部使用了countryName但未将其加入依赖数组，这会导致countryName变化时无法重新触发数据请求，属于潜在bug。

解决方法 #

1. 一次性设置货币数组，避免重复 #

不要在循环中多次更新状态，直接从接口返回数据中提取所有货币key，一次完成状态设置。这样即使useEffect执行两次，每次都会用最新的接口数据覆盖状态，不会出现重复：

useEffect(() => {
  axios.get(`https://restcountries.com/v3.1/name/${countryName}`)
    .then(response => {
      const country = response.data[0];
      setData({
        name: countryName,
        image: country.flags.png,
        nativeName: country.name.nativeName.nld,
        population: country.population,
        region: country.region,
        subRegion: country.subregion,
        capital: country.capital[0],
        borderCountries: country.borders,
        topLevelDomain: country.tld[0],
        currencies: country.currencies,
        languages: country.languages,
      });
      // 一次性提取货币key并设置状态
      setCurrencies(Object.keys(country.currencies));
    })
    .catch(err => console.error('请求失败:', err));
}, [countryName]); // 补充缺失的依赖

2. 关于StrictMode的说明 #

开发模式下的两次执行是React的刻意设计，生产环境中该行为会自动消失。如果只是开发时看到重复数据，无需特殊处理；若想临时关闭该行为，可以移除根组件外层的<StrictMode>标签，但不推荐长期这么做——它能帮你提前发现代码中的潜在问题。

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