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 !