Question

我已经声明了处于状态的对象，例如代码：

this.state = {
  attendtext: "Attend",
  showPanel: false,
  attendespanel: null,
  user: this.user
};

我用通常的setState更新它：

if (attenduser.isSiteAdmin) {
  this.setState(prevState => ({
    user: {
      ...prevState.user,
      isSiteAdmin: true
    }
  }));
}

但是我无法访问该对象的属性。例如：

this.state.user.isSiteAdmin

以上无效。怎么会来？

我的界面：

export interface UserItem {
  Key?: string;
  Username?: string;
  user?: {
    title: string,
    emailaddress: string,
    isSiteAdmin: boolean
  };
}

我还尝试通过以下方式设置状态：

this.state = {
  attendtext: "Attend",
  showPanel: false,
  attendespanel: null,
  user: { title: "", emailaddress: "", isSiteAdmin: false }
};

但是，它变为红色“对象文字只能指定已知属性，并且'title'在'UserItem []'类型中不存在”，即使在用户对象中声明了所有属性，也会发生这种情况接口。

Answer 1

这样做的时候，

this.state = {
  attendtext:"Attend",
  showPanel: false,
  attendespanel:null,
  //     ?
  user: this.user
}

this.use应该是您正在使用this.state的组件的实例变量。
例如）

class App extends Component {
  user: {}
  constructor(props) {
    super(props)
    this.state = {...}
  }
}

但是，每当App组件重新渲染时，this.user都会被重置（返回到初始的空对象{}），因为它不会由React管理。 / p>

因此，更合适的声明状态的方法是将user作为this.state的一部分，由React可以管理（使用this.setState的CRUD）

this.state = {
  attendtext: "Attend",
  showPanel: false,
  attendespanel: null,
  user: { isSiteAdmin: false }
};

现在您可以访问this.state.user.isSiteAdmin。

对象中的访问状态

1 个答案: