Wie man einen Wert dem Zustand zuweist und setState in ReactJs mit Typescript verwendet

Question

Ich habe in einigen Testprojekten in der Vergangenheit mit State und SetState herumgespielt, aber jetzt arbeite ich an einem neuen Projekt und wenn ich es tue, bekomme ich this.state = new ProductDto("some product name"); ein Fehler "Cannot convert type ProductDto to type {(): any;(): any}".

und wenn ich auch this.setState(product); bekomme ich eine Fehlermeldung:

Supplied parameter do not match any signature of call target because no overload accepts one parameters.Candidates are: K<any>() => (void) K<any>() => (void)

mein Code sieht wie folgt aus.

class ProductDto { 
    constructor(name?: string) { 
    this.name = name; 
    } 
    name: string; 
} 

class Product extends React.Component<any, ProductDto> { 
    constructor() { 
    super(); 
    this.state = new ProductDto("some product name"); 
    } 
    handleChangeProduct(product: ProductDto) { 
    this.setState(product); 
    } 
    ... 
} 

I typescript: "^2.2.1", @types/react: "^15.0.13" and react": "^15.4.2"

und die Definitionen für setState verwende sieht wie folgt in den index.d.ts

setState<K extends keyof S>(f: (prevState: S, props: P) => Pick<S, K>, callback?:() => any): void;

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

Irgendwelche Hilfe, wie man diese Arbeiten erhält, wird geschätzt. Danke.

Answer 1

Der Reaktionszustand muss ein Objekt sein. setState akzeptiert ein Objekt oder eine Funktion, die ein Objekt als ersten Parameter zurückgibt. Allerdings kann das Zustandsobjekt Klassen enthalten (Funktionen).

In Ihrem Fall, dass Sie den Zustand einstellen kann wie folgt

this.state = { product: new ProductDto("some product name") }; 

und aktualisieren es

this.setState({ product }); 

Sie mehr über Zustand hier reagieren lesen: https://facebook.github.io/react/docs/state-and-lifecycle.html