React Native函数组件useState丢失Typescript类类型如何解决？

首先明确：你的useState已经正确保留了类实例的类型，调用getTitle、getValue正常返回值即可证明这一点。两个不符合预期的日志是JavaScript本身的特性导致，和useState无关，对应解决方法如下：

1. 修复typeof返回object的问题 #

typeof 是用于判断JavaScript基础类型的运算符，对所有引用类型（包括类实例）统一返回object，属于正常行为。

• 要获取实例对应的类名：使用myClass.constructor.name，返回值就是MyClass
• 要验证实例的类归属：使用instanceof运算符，myClass instanceof MyClass 会返回true，可确认类型正确

2. 修复打印实例输出[object Object]的问题 #

直接将对象转为字符串时，默认会调用Object.prototype.toString()，输出固定格式的[object Object]。要实现自定义输出，在MyClass类中重写toString或toJSON方法即可：

• 重写toJSON：调用JSON.stringify(myClass)时会自动调用该方法，返回自定义的序列化结构
• 重写toString：直接拼接对象到字符串时自动调用，直接返回需要的字符串格式

3. 修复状态修改不触发重渲染的隐藏问题 #

React状态遵循不可变原则，你直接调用myClass.setTitle("New Title")修改现有实例的属性，React无法检测到状态变化，不会触发组件重渲染。正确的做法是修改时返回新的类实例，再调用setMyClass传入新实例。

修改后的完整代码 #

MyClass.ts

export default class MyClass {
  private title: string = "";
  private value: number = 1;

  public getTitle() {
    return this.title;
  }

  public getValue() {
    return this.value;
  }

  // 修改时返回新实例，符合不可变更新要求
  public setTitle(title: string): MyClass {
    const newInstance = new MyClass();
    newInstance.title = title;
    newInstance.value = this.value;
    return newInstance;
  }

  // 重写toJSON，JSON.stringify时自动调用
  public toJSON() {
    return {
      title: this.title,
      value: this.value
    }
  }

  // 重写toString，直接拼接对象时自动输出JSON字符串
  public toString() {
    return JSON.stringify(this.toJSON());
  }
}

组件代码

import React from "react";
import { ReactElement } from "react";
import { useState, useEffect } from "react";
import { Text, View } from "react-native";
import MyClass from "./MyClass";

export default function FunCompWithState(): ReactElement {
  const [myClass, setMyClass] = useState<MyClass>(new MyClass());

  // 初始化更新状态
  useEffect(() => {
    const updatedInstance = myClass.setTitle("New Title");
    setMyClass(updatedInstance);
  }, []);

  console.log("typeof:                " + myClass.constructor.name);
  console.log("object value:          " + myClass);
  console.log("object variable title: " + myClass.getTitle());
  console.log("object variable value: " + myClass.getValue());

  return (
    <View><Text>{myClass.getValue()}</Text></View>
  );
}

修改后运行即可得到你期望的日志输出。

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