为何点击按钮时useMutation使用的是渲染时的旧时间值？

问题根源 #

你当前的代码中，useMutation初始化时就直接执行了clientDateToday()和clientTimeNow()，这两个函数的结果会被固定在组件首次渲染的时刻，后续每次调用startNewSession都会复用这个初始计算的时间值，而非触发点击时的实时时间。

解决方案 #

将变量的计算逻辑从useMutation的初始化配置中移到调用mutate函数的时机，通过给mutate传参的方式传入实时计算的变量。

修改后的代码示例 #

1. 更新useStartSession钩子

import { START_SESSION } from "@graphql/newSession";
import { useMutation } from "@apollo/client";
import { useAuth0 } from "@auth0/auth0-react";
import { clientDateToday, clientTimeNow } from "@modules/common/helper";

interface startNewSessionVariables {
  id: number;
  userName: string;
  sessionTitle: string;
  sessionCreateDate: string;
  startDateTime: Date;
}

export const useStartSession = (sessionTitle: string) => {
  const { user } = useAuth0();

  // 初始化useMutation时不固定variables
  const [startNewSession, { data, loading, error }] = useMutation<{
    startNewSession: startNewSessionVariables;
  }>(START_SESSION);

  // 封装触发函数，在调用时才计算实时变量
  const triggerStartSession = () => {
    const userName = user?.name;
    if (!userName) {
      // 可在此处理用户未登录的边界情况
      return;
    }
    return startNewSession({
      variables: {
        userName,
        sessionTitle,
        sessionCreateDate: clientDateToday(),
        startDateTime: clientTimeNow(),
      },
    });
  };

  return { triggerStartSession, result: data, loading, error };
};

2. 调整高阶组件中的startSession函数

function startSession(): void {
    // 调用封装后的触发函数，实时计算时间
    triggerStartSession();
    //start the timer
    toggleActive();
  }

补充说明 #

之前尝试用useState无效的原因：如果useState的初始值是clientTimeNow()，这个值同样是组件首次渲染时计算的，除非你在调用mutate前手动更新state，但这会额外触发组件重渲染，远不如直接在调用时计算高效。

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