Error: Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor)

Question

I have a react component which is basically a form that submits a company's data. Everything is okay till I fill the form but when I submit the form and it goes to the next page it shows the following error:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern but can be moved to `componentWillMount`.

I tried looking for answers in other questions and GitHub but to no avail. My entire code for that component is here:

https://gist.github.com/BikalNepal/b0185dee1528e396ff3a91a4f0caf9bd

I'm aware that this can happen because of setState being an async function so I tried putting await in front of setStates but that doesn't work either, instead throws some other errors. Any help would be appreciated. Thank You!

@Bikal Nepal, Normally when we have a form and have a onSubmit handler, it goes to that url to submit the form data. That causes the page to unmount the react component. However, in this case there is a setState in the handleForm function, which could have caused this error — Leela Venkatesh K
@ChristopherNgo after the form is submitted, it renders another component based on the data saved from form. — Bikal Nepal

Kishan Jaiswal Kishan Jaiswal · Accepted Answer · 2019-05-14T05:01:05

 this.handleImageLoaded = this.handleImageLoaded.bind(this);
 this.handleOnCropComplete = this.handleOnCropComplete.bind(this);
 this.handleOnCropChange = this.handleOnCropChange.bind(this);

your this function calling was wrong,you have to pass argument in that which that want to trigger

    handleOnCropChange(crop) {
     this.setState({ crop });
    }

              <div>
                <ReactCrop
                  src={
                    this.state.companyImage === null
                      ? ""
                      : this.state.companyImage
                  }
                  crop={this.state.crop}
                  onImageLoaded={this.handleImageLoaded}
                  onComplete={this.handleOnCropComplete}
                  onChange={() => this.handleOnCropChange(this.state.crop)}
                  keepSelection={true}
                />
              </div>

for example like this and check the other function

 handleOnCropComplete(crop, pixelCrop) {
   const companyImage = this.state;
   this.makeClientCrop(crop, pixelCrop);
  }
 onComplete={() =>this.handleOnCropComplete(crop,pixelCrop)}

from wherever you are getting this value ,you need to pass as paramter to that function

Error: Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor)

1 Answers