How to set state and immediately use that state in a function, for this specific code

Question

I need a Submit button to update this.state.FormStatus. I will use this state to save to an SP list. But I'm a rookie and getting the well-known stale state issue. I understand that I need to pass a callback to setState. But I don't know how with my code.

I've tried this:

But the syntax is wrong.

private _onSubmit() {
    this.setState(function(prevState, props) {
      return {
      FormStatus: prevState.FormStatus: 'Submitted',
      SubmittedLblVis: !prevState.SubmittedLblVistrue,
      };
  });

Here is the rest of the Submit and I've corrected the code above, which may help clear things up:

 private _onSubmit() {
    this.setState(prevState =>({
      FormStatus: 'Submitted',
      SubmittedLblVis: true,
  }));
      pnp.sp.web.lists.getByTitle("JobEvaluationItems").items.add({

        JobTitle: this.state.JobTitle,
        Faculty: this.state.Faculty,
        Department: this.state.SelectedDept,
        SubDepartment: this.state.SubDepartment,
        DeptContactId: this.state.DeptContact,
        FormStatus: this.state.FormStatus

As you can see on the last line of code above, I'm trying to update an SP list with the latest this.state.FormStatus. I expect the Submit button to add 'Submitted' to this.state.FormStatus

Possible duplicate of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — Emile Bergeron, Aug 29 '19 at 14:28
Why not (1) set the "submitted" state value you want, and (2) independently submit the "add" data you want? The only connection between the two is the `state.ForStatus` value, so why wait for react to flush state changes? The other option is to use the `setState` callback method as @Dupocas has pointed out, it runs after the state update has been flushed. — Drew Reese, Aug 29 '19 at 14:34
Do you mean have two separate functions, 1 which sets the state and the other (which is called from within the 1st function maybe?) adds to the list? — NightTom, Aug 29 '19 at 14:40
@Tom there already are two functions. I meant to decouple the setting a status in state from form data submission, or in other words, get a new status value, and send it to both state and the list add at the same time, independently. — Drew Reese, Aug 29 '19 at 15:30

score 2 · Accepted Answer · answered Aug 29 '19 at 14:14

2

You're updating the state in the wrong way. To read the new state you can use the second parameter from setState which provides you a callback to be execute only when all state's updated are done

private _onSubmit() {
    this.setState( prevState =>({
         FormStatus: 'Submitted',
         SubmittedLblVis: !prevState.SubmittedLblVistrue,
      })
    }, () => console.log('Accessing the current state: ' + this.state.FormStatus));
}

answered Aug 29 '19 at 14:14

Dupocas

20,285
6
38
56

That hasn't worked. Please ignore SubmittedLblVis state by the way. Should prevState be used on FormStatus somehow? I've updated the code to show how I'm using this.state.FormStatus – NightTom Aug 29 '19 at 14:29
@Tom does the previous state value of `FormStatus` matter? I suspect not since you set it to a string constant that isn't based on the previous value at all. – Drew Reese Aug 29 '19 at 14:37
@Drew - Hi Drew, no it doesn't matter. It's null on initialisation. – NightTom Aug 29 '19 at 14:38
1

@Tom you probably just want something simpler like `this.setState({ FormStatus: 'Submitted' }, () => { });`. Just remember you also probably want to set that form status back to some default, non-submitted value when the add item code is complete. – Drew Reese Aug 29 '19 at 14:41
Yes that's it Drew. Thank you. – NightTom Aug 29 '19 at 15:37

How to set state and immediately use that state in a function, for this specific code

1 Answers1