reactjs - SurveyJS 和 NextJS - 设置变量的新状态时出现问题

Question

NextJS 版本： 12.0.8

SurveyJS 版本： 1.9.5

测试浏览器： Chrome、FF

测试应用程序（vercel）：
您可以在这里测试应用程序：https ://jem-surveyjs-nextjs.vercel.app/

问题描述：
我将SurveyJS 与NextJS 结合起来生成一个多页调查。调查的代码被添加到组件中。
可以使用 useState 操作自定义变量。每次将变量设置为不同的值时，调查都会重新加载并跳回第一页，而不是停留在当前页面上。
您可以在 dev-tools 控制台中清楚地看到这种效果。

要复制问题，只需执行以下操作：

• 创建 Nextjs 应用

• 添加调查反应模块（npm i调查反应）

• 将以下内容添加到assets/json/survey-json.js

  export const surveyJSON = {
      "pages": [
       {
        "name": "page1",
        "elements": [
         {
          "type": "radiogroup",
          "name": "Speech Test",
          "hasComment": true,
          "commentText": "add comment",
          "choices": [
           "item1",
           "item2",
           "item3"
          ]
         }
        ]
       },
       {
          "name": "page2",
          "elements": [
           {
            "type": "radiogroup",
            "name": "Try again",
            "hasComment": true,
            "commentText": "add comment",
            "choices": [
             "item4",
             "item5",
             "item6"
            ]
           }
          ]
         }
      ]
     };
  
  

• 将以下内容添加到components/Sur​​vey.js

import {useState, useEffect} from 'react'
import * as SurveyJs from "survey-react";
import "survey-react/survey.css";

import {surveyJSON} from "../assets/js/survey-json";


// Survey Component
const Survey = (props) => {

    const [custParam, setCustParam] = useState(false);


    // Avoid rehydration conflict
    // https://nextjs.org/docs/messages/react-hydration-error
    const [hasMounted, setHasMounted] = useState(false);
    useEffect(() => {
        setHasMounted(true);
    }, []);
    if (!hasMounted) {
        return null;
    }

    /**
     * Handle Custom Function
     */
    const handleClick = () => {

        // Example 3:
        setCustParam(!custParam);
        console.log("HANDLE CLICK - CUSTOM PARAM: ", custParam)
    };


    /**
     * afterRenderQuestionHandler
     */
    const afterRenderQuestionHandler = function (survey, options) {

        // Example 2:
        //setCustParam(!custParam);
        console.log("AFTER RENDER QUESTION - CUSTOM PARAM: " , custParam)

        const tarea = document.querySelector('.sv_q_other');
        if ( tarea ) {
        
            tarea.onclick = function(){ 
                handleClick(); 
            }
            
        }

    }

    let mySurvey = new SurveyJs.Model(surveyJSON);
    mySurvey.showCompletedPage = true;

    // Example 1:
    //setCustParam(true);
    console.log("BEFORE RENDER SURVEY - CUSTOM PARAM: " , custParam)

    return (
        <SurveyJs.Survey
            model={mySurvey}
            onAfterRenderQuestion={afterRenderQuestionHandler}
        />
    );
}

export default Survey;

• 最后将此添加到您的pages/index.js

import styles from '../styles/Home.module.css'
import Survey from '../components/Survey'

export default function Home() {
  return (
    <div>
            <Survey />
    </div>
  )
}

如您所见，我添加了 3 个不同的示例，说明如何在 components/Sur​​vey.js 中创建问题。示例 3 现在是活动的，但您可以取消注释示例 2 或示例 1 以查看问题的不同效果。

如何避免重新加载并跳转到第一页？

任何可以为我指明正确方向的帮助将不胜感激

更新：
非常感谢@juliomalves！
我为我的调查对象添加了一个 useState
const [mySurvey, setMySurvey] = useState({});

在已经存在的 useEffect 中，我添加了以下内容：
setMySurvey( new SurveyJs.Model(surveyJSON) );

我最后只需要删除这条线就可以了：
let mySurvey = new SurveyJs.Model(surveyJSON);