React Native中如何为组件状态属性指定自定义类类型

首先，咱们先揪出最可能导致undefined的核心原因——导入方式不匹配：

你在MainFeedPost类里用的是export default MainFeedPost;（默认导出），但在SharePostScreen中却使用了命名导入import { MainFeedPost } from "../../models";，这种写法会直接导致MainFeedPost变量变成undefined。

第一步：修正导入方式 #

把导入语句改成默认导入的形式：

// 如果models目录下直接是MainFeedPost.js文件
import MainFeedPost from "../../models/MainFeedPost";

// 或者如果models目录有index.js统一导出该类，也可以简化为：
// import MainFeedPost from "../../models";

第二步：在组件state中正确初始化类实例 #

接下来，你需要在SharePostScreen的state里创建MainFeedPost的实例，而不是直接把类本身当作属性值。这里提供两种常用写法：

写法1：在构造函数中初始化state

import MainFeedPost from "../../models";
import { Component } from "react";
import { Text } from "react-native";

class SharePostScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 创建MainFeedPost的实例作为state属性
      currentPost: new MainFeedPost()
    };
  }

  // 示例：更新post的描述
  updatePostDesc = (newDesc) => {
    this.setState(prevState => {
      // 注意：要避免直接修改原实例，先做浅拷贝
      const updatedPost = { ...prevState.currentPost };
      updatedPost.description = newDesc;
      return { currentPost: updatedPost };
    });
  };

  render() {
    return <Text>{this.state.currentPost.description}</Text>;
  }
}

export default SharePostScreen;

写法2：使用Class Fields语法（更简洁）

如果你的项目支持Class Fields（当前React Native项目基本都默认支持），可以直接在类体内定义state：

import MainFeedPost from "../../models";
import { Component } from "react";

class SharePostScreen extends Component {
  state = {
    currentPost: new MainFeedPost()
  };

  // ...其余逻辑和上面一致
}

额外提示：修复MainFeedPost类的潜在bug #

你的MainFeedPost类里有一行代码会导致运行报错：extra = { likes, shares, comments };——这里的likes、shares、comments都是未定义的变量，需要给它们赋初始值，比如：

class MainFeedPost {
  id;
  description;
  postImage;
  author;
  creationDateTime;
  version;
  status;
  // 给extra的属性设置初始值
  extra = { likes: 0, shares: 0, comments: [] };

  constructor() {
    this.author = new Author();
  }
}

完成以上操作后，你就能在组件state中正常使用自定义类的实例，不会再出现undefined的问题了。

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