React State nicht in der App aktualisieren, aber ich kann console.log korrekt aktualisiert Status

Question

Ich habe ein Formular, das ich mit es6 Klasse erstellt habe. Das Formular ist statusbehaftet und aktualisiert seinen Status onChange. Die Informationen im Zustand des Formulars werden an die App-Komponente onSubmit weitergegeben. Ich kann console.log jeden Schritt durch den Zustand, der in den Methoden meines Formulars und App-Komponente übergeben wird, und es verhält sich wie erwartet verhalten. In diesem Codebeispiel habe ich die Konsole, nachdem ich SetState in App eingestellt habe und das Statusobjekt mit dem eingegebenen Wert abgemeldet, wie ich es erwarten würde.

Das Problem ist, wenn ich in den Entwickler-Tools reagiere, wurde der Status nicht aktualisiert. Wenn ich die Konsolenanweisung in eine Callback-Funktion in der Methode SetState verschiebe, wird auch nichts protokolliert.

Meine Fragen sind, wie dies zu beheben und vor allem, warum ich in der Lage, den Zustand mit den Werten, die ich suchen, wenn der Status in der Anwendung scheint nicht tatsächlich aktualisiert haben würde ausloggen

class App extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     appointments: [{title:'first appointment'}] 
    }; 
    this.updateAppointments = this.updateAppointments.bind(this); 
    } 

    updateAppointments(newAppointment) { 
    var newAppointmentList = this.state.appointments; 
    newAppointmentList.push(newAppointment); 
    this.setState= { 
     appointments: newAppointmentList, 
     //This console logs nothing 
     function() { 
     console.log(this.state.appointments); 
     } 
    }; 
    //This console logs out the state as expected with the new appointment 
    //added even thought the state in the app does not appear to have the 
    //appointment added when I look in the react dev tools 
    console.log(this.state.appointments); 
    } 

    render() { 
    return (
     <div className="App"> 
     <AppointmentForm addAppointment = {this.updateAppointments} />   
     </div> 
    ); 
    } 
} 

class AppointmentForm extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     appointmentTitle: '' 
    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleTitleChange = this.handleTitleChange.bind(this); 
    } 
    handleTitleChange(event) { 
    this.setState({appointmentTitle: event.target.value}); 
    } 
    handleSubmit(e) { 
    let newAppointment = { 
     title: this.state.appointmentTitle 
    } 
    e.preventDefault(); 
    this.props.addAppointment(newAppointment); 
    } 
    render() { 
    return (
     <div>   
      <form onSubmit={this.handleSubmit}> 
      <FormGroup controlId="appointmentTitle"> 
       <ControlLabel>Appointment Title</ControlLabel> 
       <FormControl type="text" placeholder="Appointment Title" value={this.state.appointmentTitle} 
       onChange={this.handleTitleChange}/> 
      </FormGroup> 
      </form>   
     </div> 
    ); 
    } 
} 

Answer 1

Sie aktualisieren den Zustand falsch.

Statt:

this.setState = { 

schreiben es so:

updateAppointments(newAppointment) { 
    var newAppointmentList = this.state.appointments.slice(); 
    newAppointmentList.push(newAppointment); 
    this.setState({ 
     appointments: newAppointmentList,() => { 
      console.log(this.state.appointments); 
     } 
    }) 
} 

Vorschlag: nie den Zustandswert direkt mutieren, so zunächst eine Kopie state Array erstellen, indem slice() mit, Push Der neue Wert verwendet dann setState, um die state zu aktualisieren.

Answer 2

Sie haben einen Codefehler. Sie legen die Eigenschaft setState fest und rufen die Funktion setState nicht auf. Ändern Sie dies:

this.setState= { 
    appointments: newAppointmentList, 
    function() { 
    console.log(this.state.appointments); 
    } 
}; 

dazu:

this.setState({ 
    appointments: newAppointmentList, 
    function() { 
    console.log(this.state.appointments); 
    } 
}); 

Answer 3

vergessen Sie nicht Ihre Array von Staat zu schneiden, bevor sie eine neue Staats Handhabung.