React Redux Richtige Art der Iteration über Daten in Init

Question

Ich habe ein Formular in React, wo Benutzer Daten sehen können (über async beim Laden zurückgegeben) und bearbeiten Sie es inline. Wenn ich über eine Verknüpfung von einer anderen Seite zum Formular navigiere, funktioniert das Formular wie erwartet, da die Daten vor der Haupt-Renderfunktion geladen werden. Wenn ich jedoch die Seite mit dem Formular aktualisiere, werden die Daten trotzdessen nicht korrekt ausgefüllt es kommt in Requisiten durch.

So: Initial render with loading div -> Data comes back -> Props set -> Render fires -> State is set

Da die Eingänge auf dem Formular aus this.state eingestellten Anfangswerte haben, sind sie leer auf dem zweiten machen. Wenn ich jedoch von einer anderen Seite hierher navigiere, funktioniert alles wie erwartet. Es scheint, dass mir etwas in Bezug auf React/Redux fehlt.

Hier ist die untere Präsentationskomponente:

class ContactInfoForm extends React.Component { 
    constructor (props, context) { 
     super(props, context); 

     this.state = Object.assign({}, props.contactInfo); 

     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const name = target.name; 

     this.setState({ 
      [name]: value 
     }); 
    } 

    render() { 
     const { 
      contactInfo 
     } = this.props; 

     console.log(this.state); // {} - first render {} - second render 
     console.log(this.props); // {} - first render {stuff} - second render 

     return (
      <form> 
       <div className="col-xs-12"> 
        <TextInputGroup 
         name="email" 
         value={this.state.email} 
         onChange={this.handleChange} 
         floatedLabel="Email/Username" 
         placeholder="Email/Username" 
         className="AccountPreferences__field" 
         labelClass="AccountPreferences__label" 
        /> 
       </div> 
      </form> 
     ); 
    } 
} 

Ich verstehe, dass setState asynchron ist so, das macht Sinn, aber ich frage mich, was der beste Weg ist, um ein Formular zu initialisieren in React/Redux.

Answer 1

Sie müssen die Lifecycle-Methode componentWillReceiveProps verwenden, die aufgerufen wird, sobald Änderungen an Props-Werten auftreten, sodass Sie den Statuswert zu diesem Zeitpunkt aktualisieren müssen. Diese

Verwendung:

componentWillReceiveProps(newProps){ 
    this.setState(newProps.contactInfo); 
} 

componentWillReceiveProps:

componentWillReceiveProps() ist, bevor ein Bauteil montiert aufgerufen neue Stützen aufnimmt. Wenn Sie den Status als Antwort auf Prop-Änderungen aktualisieren müssen (z. B. um ihn zurückzusetzen), können Sie this.props und nextProps vergleichen und Zustandsübergänge unter Verwendung von this.setState() in diese Methode durchführen.