React useMutation传参异常：updatedBy变为undefined，pID正常

核心问题 #

React Query 的 useMutation 提供的回调函数仅支持接收单个参数。你调用 applyPolicies(policyId, updatedBy) 时传入了两个参数，但 useMutation 只会把第一个参数（policyId）传递给回调，第二个参数 updatedBy 自然会变成 undefined。

修复方案 #

把需要传递的多个参数包装成一个对象或数组，让 useMutation 的回调能一次性接收所有数据：

方案1：使用对象传递参数（推荐，可读性更高）

修改调用处和 mutation 函数：

// onCellClick 调用时传对象
const onCellClick = p => {
  const policyId = p?.id;
  const updatedBy = p?.row?.updated_by;
  console.log(updatedBy, "updatedBy");
  applyPolicies({ policyId, updatedBy }); // 包装成对象
};

// useApplyPolicyMutation 里接收对象参数
export const useApplyPolicyMutation = () => {
  return useMutation(
    ({ policyId, updatedBy }) => { // 解构对象获取参数
      console.log(updatedBy, "updatedByinquery");
      console.log(policyId, "pID");
      const workspaceId = getWS();
      const payload = {
        workspace_id: workspaceId,
        policy_id: policyId,
        updated_by: updatedBy
      };
      customPost("/policymanagement/api/v1/auto-discover/add-policy", payload);
    }
  );
};

方案2：使用数组传递参数

// onCellClick 调用时传数组
const onCellClick = p => {
  const policyId = p?.id;
  const updatedBy = p?.row?.updated_by;
  console.log(updatedBy, "updatedBy");
  applyPolicies([policyId, updatedBy]); // 包装成数组
};

// useApplyPolicyMutation 里接收数组参数
export const useApplyPolicyMutation = () => {
  return useMutation(
    ([pID, updatedBy]) => { // 解构数组获取参数
      console.log(updatedBy, "updatedByinquery");
      console.log(pID, "pID");
      const workspaceId = getWS();
      const payload = {
        workspace_id: workspaceId,
        policy_id: pID,
        updated_by: updatedBy
      };
      customPost("/policymanagement/api/v1/auto-discover/add-policy", payload);
    }
  );
};

补充说明 #

useMutation 的设计逻辑是让你把所有需要的参数合并成一个单一值传递，这样也能保证参数结构的清晰，避免出现多参数传递时的歧义问题。

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