使用Context+useReducer时Filters组件重复挂载问题求助

1. 稳定Context值，减少不必要重渲染 #

你遇到的核心问题是CarContext.Provider的value每次渲染都会生成新对象，加上fetchCars函数没有缓存，导致消费组件频繁触发重渲染，甚至被误判为“重复挂载”。

• 用useCallback缓存fetchCars，仅在依赖项变化时重新生成：

const fetchCars = useCallback(() => {
  fetch(`https://example.com/cars?${new URLSearchParams(state.filters)}`)
    .then(res => res.json())
    .then(data => dispatch({ type: "SET_CARS", payload: data }));
}, [state.filters, dispatch]);

• 用useMemo包裹Context的value对象，避免每次渲染都创建新引用：

const contextValue = useMemo(() => ({
  ...state,
  dispatch,
  fetchCars
}), [state, dispatch, fetchCars]);

• 最后把缓存后的contextValue传给Provider：

<CarContext.Provider value={contextValue}>
  <div className="App">
    <Filters />
    <CarsList />
  </div>
</CarContext.Provider>

2. 同步本地状态与Context状态 #

如果Filters组件的本地useState需要和Context的filters保持同步，别依赖useState的初始值（只在挂载时生效），改用useEffect监听Context值变化：

const { filters } = useContext(CarContext);
const [localState, setLocalState] = useState(filters);

// 当Context的filters更新时，同步本地状态
useEffect(() => {
  setLocalState(filters);
}, [filters]);

3. 排查条件渲染导致的卸载 #

如果确实是组件被卸载后重新挂载，检查父组件里有没有条件渲染逻辑（比如{showFilters && <Filters />}），如果筛选值变化时触发了条件切换，就会导致Filters被卸载再挂载。这种情况要么调整条件渲染逻辑，要么把本地状态移到Context中统一管理。

内容的提问来源于stack exchange，提问作者s.grushin