React Query问题：无法向mutationFn传递正确参数

你遇到的类型错误核心原因是：React Query的useMutation要求mutationFn只能接收一个参数，不能定义多个独立参数。

MutationFunction的类型定义是MutationFunction<TData, TVariables>，其中TVariables是mutationFn的唯一入参类型。你之前给mutationFn定义了两个独立参数（id: string和params: {texto: string}），这和类型约束冲突，所以触发了类型错误。

解决步骤 #

1. 合并参数为单个对象 #

把id和params合并成一个对象作为mutationFn的唯一参数，同时明确useMutation的泛型参数（第三个泛型就是你的变量类型）：

const {mutate: comentarMutation, isPending: comentarLoading} =
useMutation<ComentarioValoracionInterface, unknown, {id: string; params: {texto: string}}>({
  // 解构单个对象参数
  mutationFn: ({id, params}) => comentarValoracion(id, params),
  onMutate: () => {
    Keyboard.dismiss();
  },
  onSuccess: (response, variables) => {
    setInputText('');
    // 从variables中获取传入的id，替代原来的currentCommentScreenItem
    queryClient.setQueryData(
      [QueryKeys.COMENTARIOS_VALORACION, variables.id],
      (oldData: any) => {
        // 不要直接修改原数据，浅拷贝避免副作用
        const newData = {...oldData};
        newData.pages[0].unshift(response);
        return newData;
      },
    );
  },
});

2. 调用mutate时传入对象参数 #

现在调用comentarMutation时，需要传入合并后的对象：

// 把原来的id和params包装成对象传入
comentarMutation({id: currentCommentScreenItem!, params: {texto: inputText}});

额外注意点 #

• 不要直接修改oldData：原代码中const newData = oldData是引用赋值，修改newData会直接改变原数据，建议用{...oldData}浅拷贝（如果是复杂嵌套结构，可能需要深拷贝）。
• 泛型参数：useMutation的第二个泛型是错误类型（这里设为unknown，你可以根据comentarValoracion抛出的错误类型调整），第三个泛型必须和mutationFn的入参类型一致。

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