react-query mutation与React Context结合使用的最优实现策略是什么

方案1：状态更新与请求逻辑内聚到Context（首推） #

完全绕开useEffect监听的思路，把状态修改、触发请求、回写接口返回值的逻辑全部封装在Context内部的操作方法中，从根源避免依赖监听导致的各类问题。
核心实现逻辑：

• Context不直接暴露setState方法，而是封装专门的表单字段更新方法供子组件调用
• 更新状态时必须做不可变更新，保证状态引用变化，Context消费者能正常触发重渲染
• 状态更新完成后立刻调用mutation，传入最新的完整状态，不需要等待组件重渲染
• mutation请求成功后直接回写价格到Context状态

代码示例 #

import { createContext, useContext, useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { produce } from 'immer';

const FormContext = createContext();

export function FormProvider({ children }) {
  const [formState, setFormState] = useState({
    // 你的深度嵌套表单初始值
    baseInfo: {},
    selections: {},
    price: 0
  });

  // 价格计算mutation
  const { mutate: calcPrice } = useMutation({
    mutationFn: (fullFormState) => fetch('/api/calculate-price', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(fullFormState)
    }).then(res => res.json()),
    onSuccess: (res) => {
      // 接口返回后更新价格，这里依然用immer做不可变更新
      setFormState(prev => produce(prev, draft => {
        draft.price = res.newPrice;
      }))
    },
    onError: () => {
      // 自行补充错误提示逻辑
    }
  });

  // 带请求的字段更新方法，适用于需要触发价格计算的场景
  const updateFormField = (fieldPath, value) => {
    // 用immer更新嵌套字段，保证返回新的对象引用
    const newState = produce(formState, draft => {
      let current = draft;
      for (let i = 0; i < fieldPath.length - 1; i++) {
        current = current[fieldPath[i]];
      }
      current[fieldPath.at(-1)] = value;
    });
    // 更新Context状态
    setFormState(newState);
    // 立刻触发mutation，传入最新完整状态
    calcPrice(newState);
  };

  // 不带请求的字段更新方法，适用于不需要触发价格计算的场景
  const updateFormFieldWithoutRequest = (fieldPath, value) => {
    const newState = produce(formState, draft => {
      let current = draft;
      for (let i = 0; i < fieldPath.length - 1; i++) {
        current = current[fieldPath[i]];
      }
      current[fieldPath.at(-1)] = value;
    });
    setFormState(newState);
  };

  return (
    <FormContext.Provider value={{ 
      formState, 
      updateFormField, 
      updateFormFieldWithoutRequest 
    }}>
      {children}
    </FormContext.Provider>
  );
}

// 封装自定义hook方便调用
export const useFormContext = () => useContext(FormContext);

子组件使用示例 #

// 复选框组件
function AgreementCheckbox() {
  const { updateFormField, formState } = useFormContext();

  return (
    <input 
      type="checkbox" 
      checked={formState.selections.agreeTerms || false}
      onChange={(e) => updateFormField(['selections', 'agreeTerms'], e.target.checked)}
    />
  )
}

方案优势 #

• 没有useEffect依赖监听的各种问题，不会出现无限循环、漏触发的情况
• 逻辑内聚，子组件不需要关心mutation的实现细节，只需要调用对应的更新方法
• 灵活性高，可自由选择是否需要触发接口请求

方案2：useEffect监听兼容方案 #

如果业务场景必须要通过监听状态变化触发请求，可以按以下步骤解决现有问题：

1. 所有状态更新必须做不可变更新，保证每次状态修改后对象引用变化，否则useEffect无法识别到更新
2. 用深比较版本的useEffect替代原生useEffect，避免浅层比较无法识别嵌套字段更新的问题

代码示例 #

import { useDeepCompareEffect } from 'react-use';
import { useFormContext } from './form-context';

function FormPriceCalculator() {
  const { formState, setFormState } = useFormContext();
  const { mutate: calcPrice } = useMutation({
    mutationFn: (state) => fetch('/api/calculate-price', {
      method: 'POST',
      body: JSON.stringify(state)
    }).then(res => res.json()),
    onSuccess: (res) => {
      // 注意这里更新价格的时候不要修改其他字段，避免再次触发useEffect导致循环
      setFormState(prev => produce(prev, draft => {
        draft.price = res.newPrice;
      }))
    }
  });

  // 深比较监听整个表单状态
  useDeepCompareEffect(() => {
    // 排除仅价格变化的场景，避免无限循环
    const { price, ...restState } = formState;
    calcPrice(restState);
  }, [formState]);

  return null;
}

注意事项 #

• 必须排除价格字段的变化触发请求，否则接口返回更新价格后会再次触发useEffect，形成无限循环
• 深比较会有额外性能开销，只适合表单字段数量不多的场景

额外优化建议 #

• 高频交互防抖：输入框这类高频操作可以在updateFormField里加防抖逻辑，用户停止输入后再发请求，减少接口调用次数
• 加载状态透出：可以把mutation的isLoading状态也暴露到Context中，子组件可以展示加载态禁止重复操作
• 乐观更新：如果价格计算逻辑稳定，可以先本地预估价格更新到界面，接口返回后再修正，提升交互体验

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