typescript - React Native 功能组件 useState 丢失 Typescript 类

Question

我有一个功能组件，它具有特定类的对象的状态：

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

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

  console.log("typeof:                " + typeof myClass);
  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>
  );
}

如果有帮助，这是我的类定义：

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

  // Getters/Setters...
}

当这个呈现时，我在我的日志中得到以下信息：

❌    typeof:                object
❌    object value:          [object Object]
✅    object variable title: New Title
✅    object variable value: 1

但我会期待这样的事情：

✅    typeof:                MyClass
✅    object value:          {"title":"New Title","value":1}
✅    object variable title: New Title
✅    object variable value: 1

有没有办法useState尊重我的状态对象的类？

标签： typescriptreact-native