使用React Context与异步setState时如何保证状态一致性？

问题背景 #

我将键值对形式的筛选值维护在全局Context中，用于支持应用级状态，Context核心代码如下：

const createFilterContext = (defaultFilters: FilterState = {}) => {
const FilterContext = React.createContext<FilterContextType | undefined>(undefined);

const FilterProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [filters, setFilters] = React.useState<FilterState>(defaultFilters);

const setFilter = (key: string, value: any) => {
  setFilters((prevFilters) => ({ ...prevFilters, [key]: value }));
};

const clearFilters = () => {
  setFilters(defaultFilters);
};

return (
  <FilterContext.Provider value={{ filters, setFilter, clearFilters }}>
    {children}
  </FilterContext.Provider>
);
};

同时有一个FilterPanel组件负责渲染所有筛选控件：

const FilterPanel = ({ filterControls, onApply }: FilterPanelProps) => { }

使用方式：

<FilterPanel filterControls={filterControls} onApply={fetchDataWithFilters} />

filterControls包含下拉框、滑块、复选框等输入组件，点击FilterPanel中的“应用筛选”按钮时，会触发外部传入的onApply方法，以Context中的筛选值作为查询参数请求后端数据。

遇到的问题：React的setState是异步更新的，在大型项目中，修改筛选控件后立即点击“应用筛选”，Context中的状态还未完成更新，导致请求无法携带最新的筛选值。

设计问题分析 #

核心问题在于筛选控件的状态更新与请求触发之间没有可靠的同步机制：

1. 当前设计完全依赖全局Context的异步状态更新来传递筛选值，没有直接获取控件最新输入值的渠道
2. 点击“应用”时直接读取Context状态，无法保证此时状态已经同步了最新的用户输入

解决方案 #

方案1：应用筛选时直接收集控件最新值 #

绕过Context的异步更新，让FilterPanel在点击“应用”时直接从筛选控件中获取当前输入值，确保拿到的是最新数据。

实现代码

const FilterPanel = ({ filterControls, onApply }: FilterPanelProps) => {
  // 本地维护筛选控件的最新值
  const [localFilters, setLocalFilters] = React.useState<FilterState>({});
  const { setFilter } = React.useContext(FilterContext);

  // 控件值变化时，同时更新本地状态和全局Context
  const handleControlChange = (key: string, value: any) => {
    setLocalFilters(prev => ({ ...prev, [key]: value }));
    setFilter(key, value);
  };

  // 点击应用时，直接用本地状态的最新值触发请求
  const handleApply = () => {
    onApply(localFilters);
  };

  return (
    <div>
      {filterControls.map(control => (
        <control.component
          key={control.key}
          value={localFilters[control.key]}
          onChange={(value) => handleControlChange(control.key, value)}
          {...control.props}
        />
      ))}
      <button onClick={handleApply}>应用筛选</button>
    </div>
  );
};

方案2：在Context中添加带回调的状态更新方法 #

扩展Context的能力，新增一个支持回调的applyFilters方法，确保状态更新完成后再触发请求。

实现代码

const createFilterContext = (defaultFilters: FilterState = {}) => {
  const FilterContext = React.createContext<FilterContextType | undefined>(undefined);

  const FilterProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [filters, setFilters] = React.useState<FilterState>(defaultFilters);
    const [pendingCallback, setPendingCallback] = React.useState<((filters: FilterState) => void) | null>(null);

    const setFilter = (key: string, value: any) => {
      setFilters((prevFilters) => ({ ...prevFilters, [key]: value }));
    };

    const clearFilters = () => {
      setFilters(defaultFilters);
    };

    // 新增方法：标记需要执行的请求回调
    const applyFilters = (callback: (filters: FilterState) => void) => {
      setPendingCallback(callback);
    };

    // 监听状态变化，完成后执行回调
    React.useEffect(() => {
      if (pendingCallback) {
        pendingCallback(filters);
        setPendingCallback(null);
      }
    }, [filters, pendingCallback]);

    return (
      <FilterContext.Provider value={{ filters, setFilter, clearFilters, applyFilters }}>
        {children}
      </FilterContext.Provider>
    );
  };
};

// FilterPanel中使用新方法
const FilterPanel = ({ filterControls, onApply }: FilterPanelProps) => {
  const { applyFilters } = React.useContext(FilterContext);

  const handleApply = () => {
    applyFilters(onApply);
  };

  return (
    <div>
      {/* 筛选控件渲染逻辑 */}
      <button onClick={handleApply}>应用筛选</button>
    </div>
  );
};

方案3：用useReducer替代useState管理Context状态 #

useReducer的更新逻辑更可控，结合useEffect监听状态变化来触发请求，避免异步更新的时序问题。

实现代码

// 定义状态更新动作
type FilterAction = 
  | { type: 'SET_FILTER'; key: string; value: any }
  | { type: 'CLEAR_FILTER' }
  | { type: 'APPLY_FILTER'; callback: (filters: FilterState) => void };

// 状态处理 reducer
const filterReducer = (state: FilterState & { callback?: (filters: FilterState) => void }, action: FilterAction) => {
  switch (action.type) {
    case 'SET_FILTER':
      return { ...state, [action.key]: action.value };
    case 'CLEAR_FILTER':
      return { ...defaultFilters };
    case 'APPLY_FILTER':
      return { ...state, callback: action.callback };
    default:
      return state;
  }
};

const createFilterContext = (defaultFilters: FilterState = {}) => {
  const FilterContext = React.createContext<FilterContextType | undefined>(undefined);

  const FilterProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [state, dispatch] = React.useReducer(filterReducer, { ...defaultFilters });
    const { callback, ...filters } = state;

    // 监听回调，执行请求后清除
    React.useEffect(() => {
      if (callback) {
        callback(filters);
        dispatch({ type: 'SET_FILTER', key: 'callback', value: undefined });
      }
    }, [callback, filters]);

    const setFilter = (key: string, value: any) => {
      dispatch({ type: 'SET_FILTER', key, value });
    };

    const clearFilters = () => {
      dispatch({ type: 'CLEAR_FILTER' });
    };

    const applyFilters = (callback: (filters: FilterState) => void) => {
      dispatch({ type: 'APPLY_FILTER', callback });
    };

    return (
      <FilterContext.Provider value={{ filters, setFilter, clearFilters, applyFilters }}>
        {children}
      </FilterContext.Provider>
    );
  };
};

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