Survey-library: Cannot update during an existing state transition

[jonathan-chin]

I'm getting a console error whenever I switch pages.

the json is nothing special:

{
    "pages": [{
        "name": "page1",
        "elements": [{
            "type": "text",
            "name": "question1"
        }, {
            "type": "checkbox",
            "name": "question2",
            "choices": ["item1", "item2", "item3"]
        }, {
            "type": "radiogroup",
            "name": "question3",
            "choices": ["item1", "item2", "item3"]
        }]
    }, {
        "name": "page1",
        "elements": [{
            "type": "text",
            "name": "question1"
        }, {
            "type": "checkbox",
            "name": "question2",
            "choices": ["item1", "item2", "item3"]
        }, {
            "type": "radiogroup",
            "name": "question3",
            "choices": ["item1", "item2", "item3"]
        }]
    }]
}

and I have the Survey object inside a render function:

render(){
        return(
            <Card>
                <CardContent>
                    <Survey.Survey
                        json={this.props.surveyJson}
                        onComplete={this.props.onSubmit} />
                </CardContent>
            </Card>
        );
    }

I'm also using react-redux

any ideas?

[tsv2013]

Could you tell us what error do you get?
It would be the best if you provide us with the minimal working sample illustrating the issue.

[vovkind]

There is warning:

Warning: 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.

[vovkind]

Can it be checked please?

[tsv2013]

@vovkind Thank you for pinging me. It looks like we've lost this thread. Sorry for that.
I can't reproduce the error you mentioned in our online demos. That's why I was asking you for the live sample illustrating the issue.

[Yourgene]

Hi,
I'm having the same warning in the code I'm building.
I am implementing a survey that is displaying a single question by page each time, and waits the back end server to communicate him the next question to display, and then creates a new question, page and adds them at the end of the survey.
I have the same error as described above, but only the first time the Next button is pressed. After that, the warning disappears.

The problem is that the first time the next button is pressed in my survey, the page isn't updated properly, it stays at the first page. The user has to press next again to display the next question (and from that the update of the survey works well). I'm not sure if the bug I have is due to this warning, or because an error in my code.

Here is the stack I have :
index.js:2178 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in SurveyQuestion (created by SurveyRow) __stack_frame_overlay_proxy_console__ @ index.js:2178 printWarning @ warning.js:33 warning @ warning.js:57 warnAboutUpdateOnUnmounted @ react-dom.development.js:15206 scheduleWork$1 @ react-dom.development.js:16227 enqueueSetState @ react-dom.development.js:11300 ./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270 baseElement.setPropertyValueCoreHandler @ survey.react.js:1291 Base.setPropertyValueCore @ survey.react.js:1702 Base.setPropertyValue @ survey.react.js:1729 Question.setVisibleIndex @ survey.react.js:3416 PanelModelBase.setVisibleIndex @ survey.react.js:7910 SurveyModel.updateVisibleIndexes @ survey.react.js:12595 SurveyModel.addPage @ survey.react.js:12176 addLastPage @ FlexibleSurvey.js:337 setNextQuestionOfSurvey @ FlexibleSurvey.js:151 processQuestionIdReceived @ FlexibleSurvey.js:231 (anonymous) @ FlexibleSurvey.js:440 Promise.then (async) (anonymous) @ FlexibleSurvey.js:433 callCallback @ react-dom.development.js:10879 commitUpdateQueue @ react-dom.development.js:10912 commitLifeCycles @ react-dom.development.js:14378 commitAllLifeCycles @ react-dom.development.js:15463 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 commitRoot @ react-dom.development.js:15604 completeRoot @ react-dom.development.js:16619 performWorkOnRoot @ react-dom.development.js:16564 performWork @ react-dom.development.js:16483 performSyncWork @ react-dom.development.js:16455 interactiveUpdates$1 @ react-dom.development.js:16720 interactiveUpdates @ react-dom.development.js:2150 dispatchInteractiveEvent @ react-dom.development.js:4533

I hope the info I gave can help you. If not, I will take some time to make a working example.

Thanks in advance for your help !
Vlad

[dmitrykurmanov]

@Yourgene hello! thank you for the report. Could you please create an example to reproduce the bug? As @tsv2013 said before it is hard to reproduce it without an example or json and steps to reproduce (optional). Thanks!

PS: on json provided by @jonathan-chin I can't reproduce the problem too.

PPS: if you are reactjs developer please feel free to check our reactjs implementation (https://github.com/surveyjs/surveyjs/tree/master/src/react) and suggest us (or pull request) any changes.

[Yourgene]

@dmitrykurmanov sure, I will provide you the example in the next few days, I need some time for that.
Thanks for your reactive support :)

[Yourgene]

Hi, sorry for the time I took to answer.

Here is, to resume, the errors I had :

• Warning: Cannot update during an existing state transition. I had this one when I changed pages on the early stages of my development, but I somehow was able to get rid of it. I guess that is was a mistake coming from me rather than from surveyjs.

• Warning: Can't call setState (or forceUpdate) on an unmounted component. I still have this error, the first time I press the Next button. After that, it never appears again. I don't understand from where it could come from the code I wrote, so maybe it can come from surveyjs.

To test the last one, it is a bit difficult by using plunker. I can provide you how to reproduce the bug by cloning the git repository :

• git clone https://github.com/Yourgene/survey.git

• go in ./mocked_back, and run npm run start

• go in ./front, and run npm start

• in the browser, go to http://localhost:3000/survey/12

• answer the first randomly generated question that appears, and press next

• in the broswer debugger, the described warning log will appear

I know that the demo I'm giving you is not extremely easy to use, so if you have any question, contact me

[dmitrykurmanov]

We've fixed the issue via the https://github.com/surveyjs/surveyjs/commit/67fe99f151d2a2608e70b9101d10cbf401534afa Fix will be available in the next minor update.

And I've created a pull request for you repo: https://github.com/Yourgene/survey/pull/1 You will need it to use latest SurveyJS version.

//from
Survey.JsonObject.prototype.toObject(questionJson, question);
//to
new Survey.JsonObject().toObject(questionJson, question);

[Yourgene]

@dmitrykurmanov thanks for what you did, and your support.

About that :

PPS: if you are reactjs developer please feel free to check our reactjs implementation (https://github.com/surveyjs/surveyjs/tree/master/src/react) and suggest us (or pull request) any changes.

I'm for the moment a beginner with react, I have not enough experience to do that, unfortunately. I will talk about that to my coworker, maybe he will be able to help you.

Again, thanks for everything

[RoboSparrow]

Hi @dmitrykurmanov,

just confirming that your fix in https://github.com/surveyjs/surveyjs/commit/67fe99f151d2a2608e70b9101d10cbf401534afa
works.

Thank you,