Warum wird meine Eingabe nicht aktualisiert? - React

Question

Ich kann nicht herausfinden, warum meine input nicht aktualisiert wird. Hier ist mein Code:

state = { 
    org: { 
     orgName: '' 
    } 
}; 

updateInput = field => event => { 
    this.setState({ 
     [field]: event.target.value 
    }) 
} 

render() { 
    let { org } = this.state 
    return (
     <input 
      value={org.orgName} 
      onChange={this.updateInput('orgName')} 
     /> 
    ) 
} 

Ich tippe Daten in die input. Er ruft updateInput auf und setzt die state. Wenn render aufgerufen wird, ist die org.orgName wieder ''. Dies sollte funktionieren.

Ich habe hinzugefügt, auch ein Protokoll in der setState Rückruf:

this.setState({ 
     [field]: event.target.value 
},() => console.log(this.state.org)) 

und abmeldet die org Informationen, die in den input

Was ich vermisst eingetragen wurde? Wie mache ich das?

Answer 1

Sie haben ein verschachteltes Objekt in Ihrem Zustand - Sie this.state.orgName statt this.state.org.orgName

updateInput = field => event => { 
    this.setState({ 
     [field]: event.target.value 
    }) 
} 

Bedürfnisse aktualisieren, obwohl die Zukunft sein

updateInput = field => event => { 
    this.setState({ 
     org: { 
      ...this.state.org, 
      [field]: event.target.value 
     } 
    }) 
} 

Würde empfehlen vermeiden Sie nisten Objekte im Zustand. Wird sich später als schwierig erweisen, zu optimieren.