函数内给外部变量赋值函数未生效，如何实现用户注册后执行原定操作？

问题原因 #

• 变量类型声明不完整：你声明的stalledExecution只标注了() => Promise<void>类型，没有包含null和undefined，且未设置初始值，同时你后续会给它赋值null，类型不匹配会触发运行时/编译时报错。
• 若你使用的是React/Vue这类带组件重渲染逻辑的框架，声明在组件内的普通let变量会在每次组件重渲染时被初始化重置，之前存储的回调会丢失，自然会报变量未定义。
• 调用stalledExecution前没有做空判断，如果用户未触发任何鉴权操作直接打开并关闭注册弹窗，此时变量为空会直接报错。

可行修复方案 #

1. 普通JS/TS脚本场景（无重渲染逻辑）

先修正变量声明，再给注册回调加空判断：

// 声明时加联合类型，给定初始值null
let stalledExecution: (() => Promise<void>) | null = null;

// 注册成功回调
const handleRegistrationSuccess = async () => {
    setIsRegistrationOpen(false);
    // 先判断变量是否存在再执行
    if (stalledExecution) {
        await stalledExecution();
        stalledExecution = null;
    }
};

2. React组件场景

普通变量会随组件重渲染重置，需要用useRef存储持久化的回调：

import { useRef } from 'react';

// 组件内声明ref存储暂停的执行函数
const stalledExecutionRef = useRef<(() => Promise<void>) | null>(null);

// 发表评论逻辑修改
const handleCreateComment = async (comment: string) => {
    if (!user) {
        setIsRegistrationOpen(true);
        // 把回调存到ref的current属性上
        stalledExecutionRef.current = () => handleCreateComment(comment);
        return;
    }
    await commentApi.createComment({
        postId,
        body: comment,
    });
    getComments();
};

// 点赞逻辑同理修改
const handleLike = async (commentId: string) => {
    if (!user) {
        setIsRegistrationOpen(true);
        stalledExecutionRef.current = () => handleLike(commentId);
        return;
    }
    await likeApi.like(commentId);
};

// 注册成功回调修改
const handleRegistrationSuccess = async () => {
    setIsRegistrationOpen(false);
    if (stalledExecutionRef.current) {
        await stalledExecutionRef.current();
        stalledExecutionRef.current = null;
    }
};

更优的实现思路 #

可以把鉴权逻辑抽成通用包装函数，避免每个操作函数都写重复的登录判断逻辑：

// 通用鉴权包装函数
const withAuth = <T extends any[]>(fn: (...args: T) => Promise<void>) => {
    return async (...args: T) => {
        if (!user) {
            setIsRegistrationOpen(true);
            stalledExecutionRef.current = () => fn(...args);
            return;
        }
        await fn(...args);
    };
};

// 后续新增需要鉴权的操作，直接用withAuth包装即可，无需重复写判断
const handleCreateComment = withAuth(async (comment: string) => {
    await commentApi.createComment({
        postId,
        body: comment,
    });
    getComments();
});

const handleLike = withAuth(async (commentId: string) => {
    await likeApi.like(commentId);
});

内容的提问来源于stack exchange，提问作者Tom el Safadi