1

我在将 JSON 加载到将呈现由 SurveyJS 支持的调查的反应组件中时遇到问题。

当我将调查数据定义为组件文件中的对象时，一切正常。当我从 API (AWS-Lambda) 获取 JSON 并将其置于状态时不起作用。

我已经在控制台记录了两者——我无法检测到 state 中的值和内联定义的值之间的任何差异——一个难题！SurveyJS 错误消息是调查中没有可见页面或问题。

我在处理状态或 JSON 对象时做错了什么？

import React, { Component } from "react";
import * as Survey from "survey-react";
import "survey-react/survey.css";
import "survey-react/modern.css"
import { API } from "aws-amplify";

export default class SimpleSurvey extends Component {
    constructor(props) {
        super(props);
        this.state = {
            survey: {},
          };      
      }

    async componentDidMount() {

        try {
            let querystring = {'queryStringParameters':{'surveyId':this.props.surveyId}}
            const surveyjson = await this.getSurvey(querystring);
            this.setState({ survey: surveyjson});
        } catch (e) {
          alert(e);
        }
      }

      getSurvey(querystring) {
        return  API.get("survey", "/survey", querystring);
        }

simpleone = {"pages": [{"name": "page1","elements": [{"type": "text","name": "question1"}]}]}

 render() {
    console.log('simpleone object', this.simpleone)
    console.log('state object', this.state.survey)
    console.log('both obj the same?', this.simpleone === this.state.survey)
    console.log('simpleone string', JSON.stringify(this.simpleone))
    console.log('state string', JSON.stringify(this.state.survey))
    console.log('both string the same?', JSON.stringify(this.simpleone)===JSON.stringify(this.state.survey))

    // issue:  model works if use this.simpleone defined above; does not work if use this.state.survey set from API
    var model = new Survey.Model(this.simpleone);
    return (<Survey.Survey model={model}/>);
  }

}

这是带有 simpleone 对象和状态的 console.log ......

控制台日志

4

1 回答 1

0

是的@saglamcem - 问题是在尝试创建模型之前没有等待异步

更改了渲染函数以在调用新的 Survey.Model 之前等待状态被 API 中的 JSON 填充


export default class SimpleSurvey extends Component {
    constructor(props) {
        super(props);

        this.state = {
            survey: null,
          };      
      }

    async componentDidMount() {

        try {
            let querystring = {'queryStringParameters':{'surveyId':this.props.surveyId}}
            const surveyjson = await this.getSurvey(querystring);
            this.setState({ survey: surveyjson});
        } catch (e) {
          alert(e);
        }
      }

      getSurvey(querystring) {
        return  API.get("survey", "/survey", querystring);
        }

      getModel(json){
        var model = new Survey.Model(json);
        return (<Survey.Survey model={model} onComplete={this.onComplete}/>);
      }

      onComplete(survey, options) {
        console.log("Survey results: " + JSON.stringify(survey.data));
       }

 render() {
   return(
    <div>
    {this.state.survey ? this.getModel(this.state.survey) : null}
    </div>
   )
  }
}
于 2019-12-11T01:11:18.200 回答