Réagissez l'état ne pas mettre à jour dans l'application mais je peux console.log état mis à jour correct

Question

J'ai un formulaire que j'ai créé en utilisant la classe es6. Le formulaire est dynamique et met à jour son état onChange. Les informations dans l'état du formulaire sont transmises au composant d'application onSubmit. Je peux console.log chaque étape à travers l'état étant passé dans les méthodes de ma forme et composant de l'application et il se comporte comme prévu. Dans cet exemple de code, j'ai la console après avoir setState dans l'application et elle déconnecte l'objet d'état avec la valeur d'entrée ajoutée comme je m'y attendais. Le problème est que lorsque je regarde dans les outils de développeur de réaction, l'état n'a pas mis à jour. En outre, si je déplace l'instruction console dans une fonction de rappel dans la méthode setState, elle n'enregistre rien. Mes questions sont comment résoudre ce problème et, plus important encore, pourquoi pourrais-je déconnecter l'état avec les valeurs que je recherche lorsque l'état de l'application ne semble pas avoir été réellement mis à jour?

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

Vous mettez à jour l'état de manière incorrecte.

Au lieu de:

this.setState = { 

écrire comme ceci:

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

Suggestion: jamais muter la valeur d'état directement, donc d'abord créer une copie de state tableau en utilisant slice(), appuyez la nouvelle valeur utilise ensuite setState pour mettre à jour le state.

Answer 2

Vous avez une erreur de code. Vous définissez la propriété setState, n'appelant pas la fonction setState. Changer ceci:

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

à ceci:

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

Answer 3

ne pas oublier de couper votre tableau de l'état avant de manipuler un nouvel état.