React JS Updating item in State object to take effect immediately

Question

React JS class component

I know there have been many posts on this subject but I can't seem to get this scenario to work. Basically on my HandleClickSave event I want to update an item in my object in state without affecting the other values and then passing this updated oblect onto my service to get updated in the db. The 'item' in question is the 'design' from the (unLayer) React-email-editor. Problem is after the service is run in 'HandleClickSave' point 3 below, the receiving field 'DesignStructure' in the db is NULL every time. The other two fields are fine as these are saved to state object elsewhere.

Part of the problem is that the Email-Editor doesn't have an 'onChange' property which is where I would normally update the state. The other two values in the object are input texts and they do have an onChange which is how their state counterparts are updated.

This is the object 'NewsletterDesign':

{
    "DesignId": "1",
    "DesignName": "DesignLayout 1 Test",
    "DesignStructure": null
    
}

In my React class component...

 this.state = {            
            NewsletterDesign: {}                      

 }

And the HandleClickSave event....

HandleClickSave ()  {
      
   const { NewsletterDesign } = this.state

        this.editor.saveDesign((design) => {   

        this.setState(prevState => ({
         NewsletterDesign: {
         ...prevState.NewsletterDesign,
         DesignStructure: design   
            }  
        }));       
       
        // Update to database passing in the object 'NewsletterDesign'. Field 'DesignStructure' in db is null every time, but other two fields are updated.
            NewsletterService.UpdateCreateNewsletterDesign(NewsletterDesign)

etc....etc..

score 1 · Answer 1 · answered Jul 07 '22 at 19:31

1

React's setState is not update immediately. read more here.

You can simply do it inside setState by

   this.setState(prevState => {
     const newState = {
         NewsletterDesign: {
         ...prevState.NewsletterDesign,
         DesignStructure: design   
            }  
        };
     NewsletterService.UpdateCreateNewsletterDesign(newState.NewsletterDesign);
     return newState;

   });

answered Jul 07 '22 at 19:31

Hereblur

2,084
1
19
22

Thank you both, both replies worked great – kevmull Jul 08 '22 at 15:10

score 1 · Answer 2 · answered Jul 07 '22 at 19:40

The setState is an async operation. Meaning, that it's not guaranteed that the new state that you have updated will be accessible just after the state is updated. You can read more here

So in such cases, one of the way is to do the required operation first and then use the result at multiple places.

HandleClickSave ()  {
  
 const { NewsletterDesign } = this.state

    this.editor.saveDesign((design) => {   
    let newNewsletterDesign = { ...NewsletterDesign,
                                    DesignStructure: design   
                              };
    this.setState(newNewsletterDesign);
   
    NewsletterService.UpdateCreateNewsletterDesign(newNewsletterDesign)

React JS Updating item in State object to take effect immediately

2 Answers2