无法从我的反应应用程序中的调查 js 中获取 Json 输出答案

【问题标题】：Unable to get Json output from survey js in my react app无法从我的反应应用程序中的调查 js 中获取 Json 输出
【发布时间】：2021-06-02 08:01:09
【问题描述】：

我正在我的反应应用程序中实施调查反应：

import React, {Component} from 'react';
import "survey-react/survey.css";
import * as Survey from 'survey-react';

class App extends Component {
  constructor(props){
    super(props);
    this.state ={

    }
    this.onCompleteComponent = this.onCompleteComponent.bind(this)
  }

  onCompleteComponent = () =>{
    this.setState({
      isCompleted: true
    })
  }

  render() {
    Survey
    .StylesManager
    .applyTheme("");

    var json = {
      "title": "Simple Survey",
      "logoWidth": 60,
      "logoHeight": 60,
      "questions": [
        {
          "type": "dropdown",
          "name": "person",
          "title": "Choice",
          "hasOther": true,
          "isRequired": true,
          "choices": ["A","B","C"]
      },
          {
              "name": "name",
              "type": "text",
              "title": "Your name:",
              "isRequired": true
          },
          
          {
              "name": "I accept terms",
              "type": "checkbox",
              "isRequired": true,
              "choices": ["YES"]
          }
      ]
  };

 var model = new Survey.Model(json);

  var surveyRender = !this.state.isCompleted ?(
    <Survey.Survey
      model={model}
      showCompletedPage ={false}
      onComplete = {this.onCompleteComponent}
    />
  ) : null

  var isDone = this.state.isCompleted ?(
    <div>{JSON.stringify(model.data, null, 3)}</div>
  ): null;

  return (
    <div className = "App">
      <div>
      {surveyRender}
      {isDone}
    </div>
    </div>
  );
}
}

export default App;

但我没有得到 Json 输出表单 isDone，我尝试遵循此 https://surveyjs.io/Examples/Library/?id=survey-data&platform=Reactjs&theme=modern 但此方法对我也不起作用我应该在我的代码中更改什么以将调查结果作为 Json 对象？

【问题讨论】：

标签： reactjs surveyjs

【解决方案1】：

您在每次渲染时都在重新创建您的调查模型。这就是为什么它会在每次更改时重置。你需要做这样的事情：

import React, {Component} from 'react';
import "survey-react/survey.css";
import * as Survey from 'survey-react';

//Survey.StylesManager.applyTheme("");

  var json = {
      "title": "Simple Survey",
      "logoWidth": 60,
      "logoHeight": 60,
      "questions": [
        {
          "type": "dropdown",
          "name": "person",
          "title": "Choice",
          "hasOther": true,
          "isRequired": true,
          "choices": ["A","B","C"]
      },
          {
              "name": "name",
              "type": "text",
              "title": "Your name:",
              "isRequired": true
          },
          
          {
              "name": "I accept terms",
              "type": "checkbox",
              "isRequired": true,
              "choices": ["YES"]
          }
      ]
  };

class App extends Component {
  constructor(props){
    super(props);

    this.model = new Survey.Model(json);
    this.state ={

    }
    this.onCompleteComponent = this.onCompleteComponent.bind(this)
  }

  onCompleteComponent = () =>{
    this.setState({
      isCompleted: true
    })
  }

  render() {

  var surveyRender = !this.state.isCompleted ?(
    <Survey.Survey
      model={this.model}
      showCompletedPage ={false}
      onComplete = {this.onCompleteComponent}
    />
  ) : null

  var isDone = this.state.isCompleted ?(
    <div>{JSON.stringify(model.data, null, 3)}</div>
  ): null;

  return (
    <div className = "App">
      <div>
      {surveyRender}
      {isDone}
    </div>
    </div>
  );
}
}

export default App;

【讨论】：