React Context使用useRef存储filters时子组件更新值读取异常

安全阿岳

2026-8-30

问题根因

这个问题是两个典型的React用法错误叠加导致的，和Context本身的设计无关：

第一个核心错误：命令式弹窗的Portal渲染导致Context丢失
你用的useDialog提供的showDialog是命令式调用，绝大多数UI库的这类命令式弹窗，会把弹窗内容通过ReactDOM.createPortal甚至独立的ReactDOM.render渲染到document.body节点下，脱离你当前写的<FiltersProvider>组件树。
这种情况下，弹窗里渲染的CountryFilter调用useContext(FiltersContext)时，根本找不到上层的FiltersProvider，只能拿到你createContext时定义的默认值——默认值里的addFilter是空函数() => {}，调用它不会对Provider里存的filters做任何修改，自然读不到它写入的值。
而confirm按钮的action是在PrettyTable组件里定义的闭包，PrettyTable本身在FiltersProvider的组件树内，它拿到的addFilter是Provider注入的真实方法，所以调用后能正常修改存储的筛选值。
第二个核心错误：用useRef存需要跨组件响应的状态
就算你解决了Context穿透的问题，用useRef存filters也是错误用法：useRef的.current值更新不会触发任何组件重渲染，React完全感知不到ref值的变化，所有消费Context的组件不会自动拿到最新的筛选值，你现在能读到confirm写入的值，只是因为弹窗点击事件触发了局部重渲染，碰巧读到了ref里的最新值而已，属于不可靠的巧合。
另外你现在Context的value从来没有变过：ref对象本身的引用地址自始至终不会变，Provider没有重渲染的触发条件，所有消费Context的组件拿到的永远是第一次挂载时的value。

修复方案

按以下顺序调整即可解决问题：

替换状态存储方式
把Provider里的useRef改成useState存储filters，只有state更新才会触发Provider重渲染，Context value更新后才能通知所有消费组件同步最新值，核心代码调整示例：

// 原代码：const filters = useRef(initialFilters);
const [filters, setFilters] = useState<Record<string, any>>(initialFilters);

const addFilter = (name: string, value: any) => {
  setFilters(prev => ({
    ...prev,
    [name]: value
  }));
};

const clearFilter = (name: string) => {
  if (filters[name] !== null && filters[name] !== undefined) {
    setFilters(prev => {
      const newFilters = {...prev, [name]: null};
      return newFilters;
    });
  }
};

// Provider的value直接传filters，不需要传.current
return (
  <FiltersContext.Provider
    value={{ filters, updateFilter, addFilter, clearFilter }}
  >
    {children}
  </FiltersContext.Provider>
)

注：onFilterChange的调用建议通过监听filters变化触发，避免state异步更新导致拿到旧值：
useEffect(() => {
  onFilterChange(filters);
}, [filters, onFilterChange]);

解决弹窗Context穿透问题
二选一即可：
- 优先用声明式写法控制弹窗：不要用命令式showDialog传JSX的方式渲染弹窗，用const [open, setOpen] = useState(false)控制显隐，把Dialog组件直接写在FiltersProvider的子树里，overlayFilter直接作为Dialog的子元素渲染，保证整个弹窗内容都在Context树范围内。
- 如果必须保留命令式调用写法：在showDialog渲染DialogContent时，把当前组件树里拿到的Context方法通过props逐层传给CountryFilter，不要让弹窗内的组件自行调用useContext拿值。
修正类型定义
调整IFiltersContext的类型，和实际传值保持一致，避免类型和运行时逻辑脱节。

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