SurveyJS 与 React - 加载问题 JSON
SurveyJS with React - problems loading JSON
我在将 JSON 加载到将呈现由 SurveyJS 提供支持的调查的 React 组件时遇到问题。
当我将调查数据定义为组件文件中的对象时,一切正常。当我从 API (AWS-Lambda) 获取 JSON 并将其置于状态时不起作用。
我已经对两者进行了控制台记录 - 我无法检测到状态中的值和内联定义的值之间的任何差异 - 一个难题! 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...
是的@saglamcem - 问题是在尝试创建模型之前没有等待异步
更改渲染函数以等待状态填充 API 中的 JSON,然后再调用新的 Survey.Model
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>
)
}
}
我在将 JSON 加载到将呈现由 SurveyJS 提供支持的调查的 React 组件时遇到问题。
当我将调查数据定义为组件文件中的对象时,一切正常。当我从 API (AWS-Lambda) 获取 JSON 并将其置于状态时不起作用。
我已经对两者进行了控制台记录 - 我无法检测到状态中的值和内联定义的值之间的任何差异 - 一个难题! 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...
是的@saglamcem - 问题是在尝试创建模型之前没有等待异步
更改渲染函数以等待状态填充 API 中的 JSON,然后再调用新的 Survey.Model
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>
)
}
}