reactjs - starter - permitir que el compilador mecanografiado llame a setState en una sola propiedad de estado de reacción

react with typescript or not

Question

Estoy usando Typescript con React para un proyecto. El componente Principal pasa a estado con esta interfaz.

interface MainState {
  todos: Todo[];
  hungry: Boolean;
  editorState: EditorState;  //this is from Facebook''s draft js
}

Sin embargo, el código a continuación (solo un extracto) no se compilará.

class Main extends React.Component<MainProps, MainState> {
  constructor(props) {
    super(props);
    this.state = { todos: [], hungry: true, editorState: EditorState.createEmpty() };
  }
  onChange(editorState: EditorState) {
    this.setState({
      editorState: editorState
    });
  }
}

El compilador se queja de que, en el método onChange , donde solo estoy tratando de establecer State para una propiedad, falta la propiedad todos y la propiedad hungry en el tipo { editorState: EditorState;} . En otras palabras, necesito establecer el estado de las tres propiedades en la función onChange para hacer que el código se compile. Para que compile, tengo que hacer

onChange(editorState: EditorState){
  this.setState({
    todos: [],
    hungry: false,
    editorState: editorState
  });
}

pero no hay ninguna razón para establecer los todos y la propiedad hungry en este punto del código. ¿Cuál es la forma correcta de llamar a setState en una sola propiedad en mecanografiado / reacción?

Answer 1

Editar

Las definiciones para reaccionar se actualizaron y la firma para setState ahora es:

setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;

Donde Pick<S, K> es un tipo incorporado que se agregó en Typescript 2.1:

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}

Vea Tipos mapeados para más información.
Si aún tiene este error, puede considerar actualizar sus definiciones de reacción.

Respuesta original:

Estoy enfrentando lo mismo.

Las dos formas en que logro sortear este problema molesto son:

(1) casting / assertion:

this.setState({
    editorState: editorState
} as MainState);

(2) declarar los campos de interfaz como opcionales:

interface MainState {
    todos?: Todo[];
    hungry?: Boolean;
    editorState?: EditorState;
}

Si alguien tiene una mejor solución, me gustaría saberlo.

Editar

Si bien esto sigue siendo un problema, hay dos discusiones sobre nuevas características que resolverán este problema:
Tipos parciales (propiedades opcionalizadas para tipos existentes)
y
Tipeo más preciso de Object.assign y React component setState ()

Answer 2

Actualizar estado explícitamente, ejemplo con el contador

this.setState((current) => ({ ...current, counter: current.counter + 1 }))

Answer 3

Creo que la mejor manera de hacerlo es usar Partial

Declare su componente de la siguiente manera

class Main extends React.Component<MainProps, Partial<MainState>> {
}

Parcial cambia automáticamente todas las teclas a opcional.

Answer 4

Editar: NO USE esta solución, prefiera https://.com/a/41828633/1420794 Consulte los comentarios para obtener más información.

Ahora que el operador spread se ha enviado en TS, mi solución preferida es

this.setState({...this.state, editorState}); // do not use !