Impossible d'affecter à «état» car il s'agit d'une propriété constante ou en lecture seule

Question

Quand je fais une recherche sur ce problème, je ne peux que trouver des questions qui modifient this.state directement quelque part dans un corps de méthode au lieu d'utiliser this.setState(). Mon problème est que je veux établir un état de départ dans le constructeur comme suit:

export default class Square extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      active: false
    };
  }

  public render() {
    ...
  }
}

L'application ne parvient pas à démarrer avec l'erreur de compilation suivante:

Cannot assign to 'state' because it is a constant or a read-only property

Et c'est parce que dans la définition de la React.Component nous avons:

readonly state: null | Readonly<S>;

Donc je ne suis pas sûr de savoir comment aller à ce sujet. L'officiel de réagir tutoriel en JS directement assigne this.state et dit que c'est un motif acceptable de le faire dans le constructeur, mais je ne peux pas comprendre comment le faire avec des caractères d'imprimerie.

Answer 1

Avant de rouler en arrière (comme suggéré par @torvin de réponse), veuillez lire https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26813#issuecomment-400795486.

Ce n'était pas censé être une régression, la solution est d'utiliser state comme une propriété. C'est mieux que l'approche précédente (paramètre state dans un constructeur) parce que:

• vous n'avez pas besoin constructeur plus
• vous ne pouvez pas oublier d'initialiser l'état (c'est maintenant une erreur de compilation)

Par exemple:

type Props {}

type State {
  active: boolean
}

export default class Square extends React.Component<Props, State> {
  public readonly state: State = {
    active: false
  }

  public render() {
    //...
  }
}

Une autre approche:

type Props {}

const InitialState = {
  active: false
}

type State = typeof InitialState

export default class Square extends React.Component<Props, State> {
  public readonly state = InitialState

  public render() {
    //...
  }
}

Answer 2

Cela semble être un changement récent de la @types/react introduite en commettre 542f3c0 qui ne fonctionne pas très bien, compte tenu du fait que la Machine ne prend pas en charge l'attribution d'un parent readonly champs provenant des constructeurs.

Je suggère de restauration d'une précédente version de l' @types/react. Version 16.4.2 semble être la dernière avant la modification malheureuse a été faite.

Vous pouvez épingler la version en retrait de la ^ votre package.json:

"devDependencies": {
  ...
  "@types/react": "16.4.2",

Découvrez également les discussion à propos de ce changement sur DefinitelyTyped github tirer la page de demande de

Answer 3

Parce que state est une propriété en lecture seule du composant, il ne peut pas être défini champ par champ, mais vous pouvez toujours faire:

 constructor(props: MyProps) {
  super(props);
  this.state = {
    // include properties here
  }
}