React TypeScript中如何在构造函数初始化指定接口类型的组件状态

嘿，我来帮你一步步解决这两个问题～

首先看你的IState接口：selectedUser是可选的IUserMenu类型，这意味着它的有效值只能是两种情况：要么是符合IUserMenu结构的对象，要么是undefined（因为可选属性默认就是undefined，或者你可以明确赋值）。你之前尝试的字符串、数字、null都不符合类型要求，所以TypeScript会报错。

具体初始化方式分两种场景：

场景1：初始没有选中任何用户 #

这是最常见的情况，你有两种写法都符合要求：

• 直接初始化空对象：this.state = {}，此时selectedUser会默认是undefined，完全符合IState的类型定义；
• 明确赋值为undefined：this.state = { selectedUser: undefined }，和上面的效果完全一致，只是更显式。

代码示例：

interface IState { selectedUser?: IUserMenu}
class AssignUser extends React.Component<IProps, IState>{
  constructor(props: IProps) {
    super(props);
    // 推荐：简洁的空对象初始化
    this.state = {};
    // 或者显式设置undefined
    // this.state = { selectedUser: undefined };
  }
}

场景2：初始就有一个选中的用户 #

如果你需要一开始就设置一个选中的用户，必须创建一个完全符合IUserMenu接口结构的对象。比如假设IUserMenu的定义是这样的：

interface IUserMenu {
  id: number;
  name: string;
  // 其他可能的字段...
}

那初始化代码就要写成：

interface IState { selectedUser?: IUserMenu}
class AssignUser extends React.Component<IProps, IState>{
  constructor(props: IProps) {
    super(props);
    this.state = { 
      selectedUser: { 
        id: 101, 
        name: "张三" 
        // 记得包含IUserMenu要求的所有字段
      } 
    };
  }
}

额外：如果想使用null怎么办？ #

如果你希望selectedUser可以是null（表示“明确没有选中用户”），需要修改IState的类型定义，把null加入联合类型：

interface IState { selectedUser?: IUserMenu | null}

这样你就能在初始化时写this.state = { selectedUser: null }了。

在React类组件里，this.state是用来存储组件内部可变状态的对象。

• 当你写this.state = {}时，就是初始化一个空的状态对象。对于IState里的可选属性selectedUser来说，因为对象里没有这个属性，它的默认值就是undefined，这完全符合接口的类型要求；
• 必须在super(props)之后执行this.state = ...，因为super(props)会完成React.Component父类的初始化，让this变得可用，之后才能给this.state赋值；
• 这是React类组件初始化状态的标准写法，后续你可以通过this.setState()来更新状态（注意不能直接修改this.state）。

内容的提问来源于stack exchange，提问作者Ankit Jayaprakash