reactjs - react - No se puede asignar a ''estado'' porque es una constante o una propiedad de solo lectura

react with typescript or not

Question

Cuando realizo una búsqueda sobre este tema, solo puedo encontrar preguntas que modifiquen this.state directamente en algún lugar de un cuerpo de método en lugar de usar this.setState() . Mi problema es que quiero establecer un estado de inicio en el constructor de la siguiente manera:

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

  public render() {
    ...
  }
}

La aplicación no puede comenzar con el siguiente error de compilación:

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

Y esto es porque en la definición de React.Component tenemos:

readonly state: null | Readonly<S>;

Entonces no estoy seguro de cómo hacerlo. El tutorial oficial de reacción en JS asigna directamente a this.state y dice que es un patrón aceptable para hacerlo en el constructor, pero no puedo averiguar cómo hacer esto con TypeScript.

Answer 1

Antes de retroceder (como lo sugiere la respuesta de @ torvin), lea https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26813#issuecomment-400795486 .

Esto no pretendía ser una regresión; la solución es usar el state como una propiedad . Es mejor que el enfoque anterior (establecer el state en un constructor) porque:

• ya no necesitas constructor
• no se puede olvidar de inicializar el estado (ahora es un error de tiempo de compilación)

Por ejemplo:

type Props {}

type State {
  active: boolean
}

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

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

Otro enfoque:

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

Esto parece ser un cambio reciente en @types/react introducido en commit 542f3c0 que no funciona muy bien, teniendo en cuenta el hecho de que Typescript no admite la asignación de campos de lectura de los padres en constructores derivados.

Sugiero volver a una versión anterior de @types/react . La versión 16.4.2 parece ser la última antes de que se haya realizado el desafortunado cambio.

Puede anclar la versión eliminando ^ en su package.json :

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

También puedes ver la discusión sobre este cambio en la página de solicitud de extracción de github DefinitelyTyped