纯函数中useState更新后如何执行回调？Context场景处理方案

针对你遇到的Context状态更新后无法通过回调执行后续操作的问题，提供以下几种可行方案：

方案1：在组件中精准监听目标状态变化 #

既然状态在顶层Context，你可以在需要执行操作的组件里，结合selectedSampleJobIndex过滤触发时机，避免用户输入导致的误执行：

import { useContext, useEffect, useState } from 'react';
import { AppContext } from './path/to/your/context';

function TargetComponent() {
  const { appState } = useContext(AppContext);
  const { selectedSampleJobIndex } = props; // 该值可来自组件props或本地状态
  const [lastHandledIndex, setLastHandledIndex] = useState(null);

  useEffect(() => {
    // 仅当通过selectedSampleJobIndex触发更新，且未处理过该索引时执行操作
    if (selectedSampleJobIndex !== undefined && selectedSampleJobIndex !== lastHandledIndex) {
      // 写入你需要执行的后续操作
      console.log('resumeInput已更新，执行后续逻辑');
      setLastHandledIndex(selectedSampleJobIndex);
    }
  }, [appState.resumeInput, selectedSampleJobIndex]);

  // 组件其他逻辑...
}

方案2：在Context内部封装带回调的更新方法 #

直接在Context的Provider中封装支持回调的状态更新函数，确保回调在状态更新后执行：

// Context定义文件
import { createContext, useState, useContext } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  const [appState, setAppState] = useState(/* 初始状态 */);

  // 封装带回调的更新函数
  const updateResumeInput = (newValue, callback) => {
    setAppState(prev => ({ ...prev, resumeInput: newValue }));
    // 用requestAnimationFrame确保状态已完成更新
    requestAnimationFrame(() => {
      typeof callback === 'function' && callback();
    });
  };

  return (
    <AppContext.Provider value={{ appState, updateResumeInput }}>
      {children}
    </AppContext.Provider>
  );
}

export const useAppContext = () => useContext(AppContext);

在使用处替换原setAppState调用：

import { useAppContext } from './path/to/your/context';

function YourComponent() {
  const { updateResumeInput } = useAppContext();
  const { selectedSampleJobIndex, sampleJobValues } = props;

  useEffect(() => {
    if (selectedSampleJobIndex !== undefined) {
      updateResumeInput(sampleJobValues[selectedSampleJobIndex], () => {
        // 状态更新后的操作写在这里
        console.log('resumeInput更新完成，执行回调');
      });
    }
  }, [selectedSampleJobIndex, sampleJobValues, updateResumeInput]);

  // 组件其他逻辑...
}

方案3：用useReducer管理复杂状态逻辑 #

如果Context内状态逻辑较复杂，改用useReducer能更灵活地处理状态更新后的副作用：

// Context定义文件
import { createContext, useReducer, useContext, useEffect, useState } from 'react';

const AppContext = createContext();

// 定义reducer
function appReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_RESUME_INPUT':
      return { ...state, resumeInput: action.payload };
    default:
      return state;
  }
}

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, /* 初始状态 */);
  const [lastAction, setLastAction] = useState(null);

  // 监听action，执行后续操作
  useEffect(() => {
    if (lastAction?.type === 'UPDATE_RESUME_INPUT') {
      // 这里写状态更新后的操作
      console.log('resumeInput已更新，触发副作用');
    }
  }, [lastAction]);

  // 自定义dispatch，记录最近一次action
  const customDispatch = (action) => {
    dispatch(action);
    setLastAction(action);
  };

  return (
    <AppContext.Provider value={{ state, dispatch: customDispatch }}>
      {children}
    </AppContext.Provider>
  );
}

export const useAppContext = () => useContext(AppContext);

使用时通过dispatch触发更新：

import { useAppContext } from './path/to/your/context';

function YourComponent() {
  const { dispatch } = useAppContext();
  const { selectedSampleJobIndex, sampleJobValues } = props;

  useEffect(() => {
    if (selectedSampleJobIndex !== undefined) {
      dispatch({
        type: 'UPDATE_RESUME_INPUT',
        payload: sampleJobValues[selectedSampleJobIndex]
      });
    }
  }, [selectedSampleJobIndex, sampleJobValues, dispatch]);

  // 组件其他逻辑...
}

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