React外部自定义Hook状态更新后页面未重渲染问题排查

自定义Hook本质是可复用的逻辑封装函数，本身不存在全局状态共享能力：每次组件调用useCountries()时，都会独立执行Hook内部的所有代码，创建一个完全独立的useState状态副本。
你在Hook内部观测到状态长度变化，是因为执行setFilteredCountries的那个Hook实例的状态确实更新了，但页面组件里调用useCountries()生成的是另一个独立的状态实例，始终停留在初始的241个国家的状态，自然不会触发重渲染、下拉框也不会同步更新。
另外你当前的状态更新写法也存在闭包风险，直接拿闭包中的filteredCountries做过滤，在异步触发场景下很容易拿到旧值。

根据你的使用场景二选一即可：

场景1：需要在多个组件/不同位置调用useCountries共享同一份国家数据 #

把状态上提到Context层做全局共享，让所有调用Hook的组件消费同一份状态：

1. 新建国家数据的Context和Provider组件，把状态、过滤方法都放在Provider内部
2. 自定义Hook内部直接读取Context值，不再单独声明私有state
   参考实现代码：

import { createContext, useContext, useState } from 'react';
import { countries } from './your-countries-data-path';

const CountriesContext = createContext(null);

// 外层包裹组件，放在需要用到国家数据的组件树最外层
export function CountriesProvider({ children }) {
  const [filteredCountries, setFilteredCountries] = useState(countries);

  // 封装过滤方法，用函数式更新规避闭包旧值问题
  const excludeCountry = (selectedCountry) => {
    setFilteredCountries(prevList => 
      prevList.filter(item => item.name !== selectedCountry)
    );
  };

  return (
    <CountriesContext.Provider value={{ filteredCountries, excludeCountry }}>
      {children}
    </CountriesContext.Provider>
  );
}

// 自定义Hook
export function useCountries() {
  const contextValue = useContext(CountriesContext);
  if (!contextValue) {
    throw new Error('useCountries 必须在CountriesProvider包裹范围内使用');
  }
  return contextValue;
}

使用时先在页面/根组件外层包上Provider：

<CountriesProvider>
  <YourPageWithSelect />
</CountriesProvider>

之后不管在哪个子组件里调用const { filteredCountries, excludeCountry } = useCountries()，拿到的都是同一份状态，调用excludeCountry更新状态时所有消费组件都会自动重渲染，下拉框选项会同步更新。

场景2：仅在当前下拉框所属组件使用useCountries，不需要跨组件共享 #

检查两个配置点即可：

• 必须把状态更新方法从Hook中暴露出来，组件侧只能调用同一个Hook实例返回的更新方法触发过滤，不要在Hook外单独定义set逻辑。Hook参考写法：

function useCountries() {
  const [filteredCountries, setFilteredCountries] = useState(countries);

  const excludeCountry = (selectedCountry) => {
    // 固定用函数式更新，避免闭包拿到旧状态
    setFilteredCountries(prev => prev.filter(item => item.name !== selectedCountry));
  };

  // 把状态和更新方法一起返回
  return { filteredCountries, excludeCountry };
}

• 过滤逻辑不要直接写在Hook的渲染执行流程里，要放在用户事件回调、useEffect这类合法的状态触发位置，渲染过程中直接调用setState会被React判定为无效更新，不会触发重渲染。

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