TypeScript类this指向错误致React Native模态栈管理异常求助

我正在用React Native + TypeScript实现一个栈式模态框管理类，目的是避免模态框占用过多内存。但调用push/pop方法时，栈内容始终不符合预期，this关键字从未指向正确的类实例。

我已经查过TypeScript类相关资料，尝试了修改方法写法、绑定方法等方案，但问题依然存在。怀疑自己可能在用Java的思维写TypeScript，但不确定具体问题出在哪。

补充：我怀疑问题出在render方法向模态构建函数传递this参数的环节，模态框调用该this上的方法时出现异常，但不知道怎么修复。

相关代码 #

ModalManager类 #

type modalData = {
    modalFunction: Function; //Function that loads the modal
    modalParameters: Array<any>; //stack of paramers for function
}  
class ModalManager {
    private modalMap: Map<string, modalData> = new Map<string, modalData>();
    private defaultView: ReactNode = <View></View>;
    private modalStack: Stack<string> = new Stack<string>([""]);
    private renderCallback: Function;  
    constructor(renderCallback: Function) {
      this.renderCallback = renderCallback;
      this.setDefaultView = this.setDefaultView.bind(this);
      this.registerModal = this.registerModal.bind(this);
      this.pushModal = this.pushModal.bind(this);
      this.popModal = this.popModal.bind(this);
      this.render = this.render.bind(this);
    }  
    setDefaultView(defaultView: ReactNode){
      this.defaultView = defaultView;
    }  
    registerModal(modalName: string, modalFunction: (params: any[], containerModal: ModalManager) => ReactNode){
        if (modalName != "") {
            this.modalMap.set(modalName, {modalFunction: modalFunction, modalParameters: new Array()} as modalData);
        }
    }  
    pushModal(modalName: string, modalParameters: any){
      //Make sure modal is registered
      if (this.modalMap.has(modalName)) {
        //put modal at top of modal stack
        this.modalStack.push(modalName);
        console.log("1", this.modalStack.peek())
        //put modal parameters in modal parameters stack
        this.modalMap.get(modalName)?.modalParameters.unshift(modalParameters);
        //Cause rerender
        this.renderCallback(modalName);
      }
    }  
    popModal(){
        console.log("4", this.modalStack.peek())

        if (this.modalStack.peek() != "") {
            this.modalStack.pop()
            console.log("3", this.modalStack.peek())

            this.renderCallback(this.modalStack.peek())
        }
    }  
    render(currentModal: string){
        console.log("2", this.modalStack.peek())

      return (
        <View>
          <View>
          {(currentModal != "") ? 
            this.modalMap.get(currentModal)?.modalFunction(this.modalMap.get(currentModal)?.modalParameters, this) : <View/>
          }
          </View>
          {this.defaultView}
        </View>
      );
    }
  }

Stack类 #

class StackNode<T> {
    next: StackNode<T> | null = null;
    value: T;

    constructor(value: T, next: StackNode<T> | null) {
        this.value = value;
    }
}


class Stack<T> {
    private top: StackNode<T> | null = null;

    constructor(starter: Array<T>) {
        this.push = this.push.bind(this);
        this.pop = this.pop.bind(this);
        this.peek = this.peek.bind(this);

        starter.forEach((item) => {
            this.push(item);
        })
    }

    push(value: T){
        let newTop: StackNode<T> = new StackNode<T>(value, this.top);
        this.top = newTop;
    }

    pop(){
        if (this.top != null) {
            this.top = this.top.next;
        }
    }

    peek(){
        return this.top?.value;
    }
}

应用代码 #

const [currentModal, setCurrentModal] = useState("");

  const containerModal: ModalManager = new ModalManager(setCurrentModal)

  containerModal.setDefaultView(
    <View>
      <Button title="Open modal 1" onPress={() => {containerModal.pushModal("test", {name: "Eli", value: 10, key: "secret"})}} />
    </View>
  );

  containerModal.registerModal("test", testModalFunction);
  containerModal.registerModal("test2", test2ModalFunction);

  return (
    <View>
      {containerModal.render(currentModal)}
    </View>
  );
};

解决方案 #

1. 用useRef保存ModalManager实例（核心修复） #

React组件每次重渲染时，函数内部变量会重新初始化，直接声明const containerModal = new ModalManager(...)会导致每次生成新实例，之前的栈状态全部丢失。改用useRef保存实例，确保组件生命周期内只有一个实例：

const containerModalRef = useRef<ModalManager | null>(null);
const [currentModal, setCurrentModal] = useState("");

// 只在组件挂载时创建一次实例
useEffect(() => {
  containerModalRef.current = new ModalManager(setCurrentModal);
  // 初始化默认视图和注册模态框
  containerModalRef.current.setDefaultView(
    <View>
      <Button title="Open modal 1" onPress={() => {
        containerModalRef.current?.pushModal("test", {name: "Eli", value: 10, key: "secret"})
      }} />
    </View>
  );
  containerModalRef.current.registerModal("test", testModalFunction);
  containerModalRef.current.registerModal("test2", test2ModalFunction);
  
  return () => {
    // 可选：清理模态框资源
  };
}, []); // 空依赖数组确保只执行一次

return (
  <View>
    {containerModalRef.current?.render(currentModal)}
  </View>
);

2. 优化类方法绑定（可选，更简洁） #

用类箭头函数替代手动bind，自动绑定this，避免绑定遗漏：

class ModalManager {
    private modalMap: Map<string, modalData> = new Map<string, modalData>();
    private defaultView: ReactNode = <View></View>;
    private modalStack: Stack<string> = new Stack<string>([""]);
    private renderCallback: Function;  

    constructor(renderCallback: Function) {
      this.renderCallback = renderCallback;
      // 无需手动bind
    }  

    setDefaultView = (defaultView: ReactNode) => {
      this.defaultView = defaultView;
    }  

    registerModal = (modalName: string, modalFunction: (params: any[], containerModal: ModalManager) => ReactNode) => {
        if (modalName != "") {
            this.modalMap.set(modalName, {modalFunction, modalParameters: []} as modalData);
        }
    }  

    pushModal = (modalName: string, modalParameters: any) => {
      if (this.modalMap.has(modalName)) {
        this.modalStack.push(modalName);
        console.log("1", this.modalStack.peek())
        this.modalMap.get(modalName)?.modalParameters.unshift(modalParameters);
        this.renderCallback(modalName);
      }
    }  

    popModal = () => {
        console.log("4", this.modalStack.peek())
        if (this.modalStack.peek() != "") {
            this.modalStack.pop()
            console.log("3", this.modalStack.peek())
            this.renderCallback(this.modalStack.peek())
        }
    }  

    render = (currentModal: string) => {
        console.log("2", this.modalStack.peek())
      return (
        <View>
          <View>
          {(currentModal != "") ? 
            this.modalMap.get(currentModal)?.modalFunction(this.modalMap.get(currentModal)?.modalParameters, this) : <View/>
          }
          </View>
          {this.defaultView}
        </View>
      );
    }
  }

3. 修复Stack类构造函数（可选） #

调整StackNode构造函数的参数处理，避免next属性初始化遗漏：

class StackNode<T> {
    next: StackNode<T> | null = null;
    value: T;

    constructor(value: T, next?: StackNode<T> | null) {
        this.value = value;
        if (next) this.next = next;
    }
}

class Stack<T> {
    private top: StackNode<T> | null = null;

    constructor(starter?: Array<T>) {
        // 箭头函数自动绑定this
        this.push = (value: T) => {
            const newTop = new StackNode(value, this.top);
            this.top = newTop;
        };
        this.pop = () => {
            if (this.top) {
                this.top = this.top.next;
            }
        };
        this.peek = () => {
            return this.top?.value;
        };

        starter?.forEach(item => this.push(item));
    }
}

关键问题说明 #

你遇到的this指向异常，核心原因是组件每次重渲染都会新建ModalManager实例，导致调用方法时操作的是不同实例，栈状态无法保持。用useRef保存实例后，整个组件生命周期内只有一个实例，this指向稳定，栈状态也能正确维护。

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