如何将useState管理的表单逻辑迁移至Context actions？

报错原因非常明确：

• setcardholder、setErrors是组件内部调用useState生成的局部作用域方法，Context的action运行在Provider作用域下，根本访问不到组件内部的局部setter，自然会报未定义错误。
• 你现在的实现属于逻辑和状态错位：更新逻辑挪去了Context，但表单值、校验错误状态还存在组件本地的useState里，两边作用域完全隔离，逻辑根本跑不通。
• 既然要抽离跨组件复用的表单公共逻辑，就不能把状态存在单个组件内部，必须把信用卡表单相关的所有状态、修改逻辑全部收拢到Context层统一维护，组件只负责消费状态、触发action、渲染UI即可。

1. 把表单相关状态全部提升到Context层 #

首先在Context的状态初始化位置，把原来存在组件本地的表单项值、校验错误状态全部挪到Context全局state中，统一放到信用卡表单对应的命名空间下，示例：

// Context 初始状态示例
const initialState = {
  booking: {
    creditCard: {
      cardholder: '',
      cardnumber: '',
      errors: {
        cardholder: false,
        cardnumber: false
      }
    },
    // 其他booking模块状态...
  }
  // 其他全局状态...
}

2. 在Context actions中实现完整的字段更新+校验逻辑 #

onChangeCreditCardFields方法需要接收事件对象e作为入参，内部直接操作Context层的状态，不要引用任何组件内部的局部变量。如果是用useReducer管理Context状态，就通过dispatch派发更新；如果是用useState存Context值，直接调用Context层的状态setter即可。
以useReducer+ thunk 风格的action实现为例：

// Context中定义的actions集合
const actionsCollection = {
  booking: {
    onChangeCreditCardFields: (e) => (dispatch, getState) => {
      const { name, value } = e.target;
      const state = getState();
      const currentErrors = { ...state.booking.creditCard.errors };
      let updateValue = value;

      // 原有校验逻辑直接平移，针对不同字段做规则判断
      switch(name) {
        case 'cardholder':
          const cardholderReg = /^[a-zA-Z\u00C0-\u00FF\s*$]{1,50}$/;
          const isValid = cardholderReg.test(value);
          // 空值直接赋值，合法值同步更新错误状态，非法值逻辑可根据原有业务补全
          if (value === '' || isValid) {
            updateValue = value;
            currentErrors.cardholder = value === '' ? false : !isValid;
          }
          break;
        // cardnumber等其他字段的校验、更新逻辑按原有规则补全
        default:
          break;
      }

      // 派发更新，修改Context全局状态
      dispatch({
        type: 'UPDATE_CREDIT_CARD_FIELD',
        payload: {
          field: name,
          value: updateValue,
          errors: currentErrors
        }
      })
    },
    // 表单保存逻辑也统一放在这里，直接读取Context中存的信用卡数据提交即可
    saveCreditCardForm: () => async (dispatch, getState) => {
      const { creditCard } = getState().booking;
      // 提交前全量校验、接口调用、成功/失败状态更新逻辑...
    }
  }
}

对应在reducer中增加字段更新的处理逻辑：

// reducer处理状态更新
function appReducer(state, action) {
  switch(action.type) {
    case 'UPDATE_CREDIT_CARD_FIELD':
      return {
        ...state,
        booking: {
          ...state.booking,
          creditCard: {
            ...state.booking.creditCard,
            [action.payload.field]: action.payload.value,
            errors: action.payload.errors
          }
        }
      }
    // 其他action处理...
    default:
      return state;
  }
}

3. 改造业务组件，删除本地表单状态，直接消费Context #

组件内不需要再维护cardholder、cardnumber、errors相关的本地useState，所有状态直接从Context解构获取，onChange触发时记得把事件对象传给Context action：

// 业务组件内代码
const { state, actionsCollection } = useContext(StateContext);
// 直接从Context拿状态和方法，删除原有的本地useState定义
const { cardholder, cardnumber, errors } = state.booking.creditCard;
const { onChangeCreditCardFields, saveCreditCardForm } = actionsCollection.booking;

const onChange = (e) => {
  // 必须把事件对象e作为参数传入action
  onChangeCreditCardFields(e);
}

// 表单渲染直接绑定全局状态即可
return (
  <form>
    <div>
      <label>持卡人姓名</label>
      <input 
        name="cardholder" 
        value={cardholder} 
        onChange={onChange}
      />
      {errors.cardholder && <span className="error">持卡人姓名格式不正确</span>}
    </div>
    {/* 其他表单项按相同规则绑定 */}
    <button type="button" onClick={saveCreditCardForm}>保存</button>
  </form>
)

• 所有复用该信用卡表单的组件，都不需要再重复写状态定义、校验、提交逻辑，直接从Context拿值调用方法即可，完全满足公共逻辑抽离的需求。
• 不要在Context action中尝试访问组件内部的局部变量、state setter，React组件局部作用域和Context作用域是完全隔离的，所有需要跨组件共享的状态必须提升到Context层维护。
• 如果需要表单重置能力，直接在Context中新增resetCreditCardForm的action，重置Context下的信用卡相关状态即可，所有复用该表单的组件会自动同步状态。

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