Aktualisiere Reagestatus mit Unveränderlich

Question

Ich versuche, meinen normalen React-Status durch Immutable zu aktualisieren, und bin in einige wenige Probleme geraten. Der Status ist nicht tief geschachtelt oder ist nicht verschachtelt von etwas anderem als dem Zustand selbst, wie { "username" : "keyval" : null}}

Das bedeutet, ich konnte etwas wie username.update('keyval', something) nicht tun, stattdessen brauche ich einen anderen Ansatz. Es ist eine ziemlich einfache Frage, ich weiß einfach nicht, wie ich es machen soll. So sieht mein setState aus, mit dem ich eine Immutable-setState-Aktion erstellen möchte.

handleUpdatePassword(event) { 
    event.persist() 
    this.setState(({password}) => ({ 
     password: state.update('password', event.target.value) 
     }) 
    ); 
    } 

Und hier ist der Fehler, den ich beim Versuch:

handleUpdatePassword(event) { 
     event.persist() 
     this.setState({ 
      password: state.update('password', event.target.value) 
      }) 
     } 

Auch Dies funktioniert, aber ich bekomme diese Fehlermeldung: this.state.updater is not a function

handleUpdateUsername(event) { 
    console.log(this.state) 
    event.persist() 
    this.setState({ 
     username: this.state.update('username', event.target.value) 
     }) 
    } 

Answer 1

state sollte ein einfaches JavaScript-Objekt sein, wie Sie in der documentation lesen können.

Note that state must be a plain JS object, and not an Immutable collection, because React's setState API expects an object literal and will merge it (Object.assign) with the previous state.

Ihr Ausgangszustand so etwas wie dieses

constructor(){ 
    ... 
    this.state = {data: Map({ password: "", username: ""})} 
} 

Danach aussehen sollte, Sie in der Lage sein werden, die Daten wie diese

handleUpdatePassword(event) { 
this.setState(({data}) => ({ 
     data: data.update('password', password => event.target.value) 
    })); 
} 

Answer 2

Sie erstellen explizite Objekte . Lassen Sie ImmutableJS es für Sie tun.

class YourReactComp extends React.Component { 
    constructor() { 
    this.state = Immutable.Map({"username": ""}); 
    } 
    handleUpdateUsername(event) { 
    console.log(this.state) 
    event.persist() 
    this.setState(this.state.set("username", event.target.value)); 
    } 
} 

EDIT

ImmutableMap.update(key, updater) verwendet einen Rückruf um den Wert einzustellen, Sie ImmutableMap.set(key, newValue) hier wollen.