如何在 react js 中显示本地 json 文件中的数据？
[英]How to display data from a local json file in react js.?
问题描述
Iam trying to get a response from my local json file i have imported the data from the external file and placed it in local json file but when i try to map data in the component it dives me an error that map is not a function and it doesnt works. 
Iam trying to get a response from my local json file i have imported the data from the external file and placed it in local json file but when i try to map data in the component it dives me an error that map is not a function and it不起作用。 Also i waant to access an object from the internal array which is UserDataQuestions array and map it in my component我也想从内部数组访问 object，它是 UserDataQuestions 数组和 map 它在我的组件中
My component我的组件
import React, { Component } from "react";
import frontPage from "./dummy";
export default class DummyForm extends Component {
constructor(props) {
super(props);
this.state = {
field: "",
checkBox: "",
options: "",
radioField: "",
error: "",
data: frontPage,
};
}
componentDidMount() {
this.setState({
data: frontPage,
});
}
render() {
console.log(frontPage);
return (
<React.Fragment>
{this.state.data.map((x, i) => (
<select className="custom-select" id="inputGroupSelect01">
<option key={i}>
{x.QuestionText}
</option>
</select>
))}
</React.Fragment>
}
/>
</React.Fragment>
);
}
}
My Json file我的 Json 文件
export default {
frontPage: [
{
"Id": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"UserDataQuestions": [
{
"Id": 76,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Adresse inkl. postnummer og by",
"QuestionType": "TextBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "FullAddress",
"FieldResponse": null,
"OrderBy": 4,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": []
},
{
"Id": 69,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du hjemmeboende børn?",
"QuestionType": "Radio",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "field30",
"FieldResponse": null,
"OrderBy": 5,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10608,
"Value": "Ja",
"Description": "Ja",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 69
},
{
"Id": 10609,
"Value": "Nej",
"Description": "Nej",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 69
}
]
},
{
"Id": 68,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du børn?",
"QuestionType": "CheckBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q68",
"FieldResponse": null,
"OrderBy": 7,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10601,
"Value": "Ingen børn",
"Description": "Ingen børn",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10602,
"Value": "Ja i alderen 0-3 år",
"Description": "Ja i alderen 0-3 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10603,
"Value": "Ja i alderen 4-6 år",
"Description": "Ja i alderen 4-6 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10604,
"Value": "Ja i alderen 7-9 år",
"Description": "Ja i alderen 7-9 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10605,
"Value": "Ja i alderen 10-13 år",
"Description": "Ja i alderen 10-13 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10606,
"Value": "Ja i alderen 14-18 år",
"Description": "Ja i alderen 14-18 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10607,
"Value": "Ja over 18 år.",
"Description": "Ja over 18 år.",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 7,
"EarnMoreServiceQuestionId": 68
}
]
},
{
"Id": 6,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Indkomst (for hele din husstand, i alt pr. år før skat)",
"QuestionType": "DropDown",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q6",
"FieldResponse": null,
"OrderBy": 8,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10012,
"Value": "Indtil 199.999 kr.",
"Description": "Indtil 199.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10013,
"Value": "200.000 - 399.999 kr.",
"Description": "200.000 - 399.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10014,
"Value": "400.000 - 749.999 kr.",
"Description": "400.000 - 749.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10015,
"Value": "750.000 - 999.999 kr.",
"Description": "750.000 - 999.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10016,
"Value": "1.000.000 kr. eller mere",
"Description": "1.000.000 kr. eller mere",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10209,
"Value": "Ønsker ikke at oplyse",
"Description": "Ønsker ikke at oplyse",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 6
}
]
}
]
},
"AllowSecondClick": true,
"RemainingDays": 3668.0,
"ServiceUserStatus": "Completed",
"ShowQuarantineWarning": false,
"PartnerId": 0,
"SoldOutStatus": null
}
]
}
2 个解决方案
解决方案1
0 2020-12-16 12:58:27
Change your data file to:将您的数据文件更改为：
export default [
{
"Id": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"UserDataQuestions": [
{
"Id": 76,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Adresse inkl. postnummer og by",
"QuestionType": "TextBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "FullAddress",
"FieldResponse": null,
"OrderBy": 4,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": []
},
{
"Id": 69,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du hjemmeboende børn?",
"QuestionType": "Radio",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "field30",
"FieldResponse": null,
"OrderBy": 5,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10608,
"Value": "Ja",
"Description": "Ja",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 69
},
{
"Id": 10609,
"Value": "Nej",
"Description": "Nej",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 69
}
]
},
{
"Id": 68,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du børn?",
"QuestionType": "CheckBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q68",
"FieldResponse": null,
"OrderBy": 7,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10601,
"Value": "Ingen børn",
"Description": "Ingen børn",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10602,
"Value": "Ja i alderen 0-3 år",
"Description": "Ja i alderen 0-3 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10603,
"Value": "Ja i alderen 4-6 år",
"Description": "Ja i alderen 4-6 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10604,
"Value": "Ja i alderen 7-9 år",
"Description": "Ja i alderen 7-9 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10605,
"Value": "Ja i alderen 10-13 år",
"Description": "Ja i alderen 10-13 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10606,
"Value": "Ja i alderen 14-18 år",
"Description": "Ja i alderen 14-18 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10607,
"Value": "Ja over 18 år.",
"Description": "Ja over 18 år.",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 7,
"EarnMoreServiceQuestionId": 68
}
]
},
{
"Id": 6,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Indkomst (for hele din husstand, i alt pr. år før skat)",
"QuestionType": "DropDown",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q6",
"FieldResponse": null,
"OrderBy": 8,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10012,
"Value": "Indtil 199.999 kr.",
"Description": "Indtil 199.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10013,
"Value": "200.000 - 399.999 kr.",
"Description": "200.000 - 399.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10014,
"Value": "400.000 - 749.999 kr.",
"Description": "400.000 - 749.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10015,
"Value": "750.000 - 999.999 kr.",
"Description": "750.000 - 999.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10016,
"Value": "1.000.000 kr. eller mere",
"Description": "1.000.000 kr. eller mere",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10209,
"Value": "Ønsker ikke at oplyse",
"Description": "Ønsker ikke at oplyse",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 6
}
]
}
]
},
"AllowSecondClick": true,
"RemainingDays": 3668.0,
"ServiceUserStatus": "Completed",
"ShowQuarantineWarning": false,
"PartnerId": 0,
"SoldOutStatus": null,
]
解决方案2
0 已采纳 2020-12-16 13:03:07
You're trying to access the array within the key frontPage of your JSON, but you're trying to map the whole JSON as if it is an array(but it's not).您正在尝试访问 JSON 的关键frontPage中的数组，但您正在尝试 map 整个 JSON 就好像它不是一个数组一样（但它不是）。
You can do 2 approaches:你可以做2种方法：
.either map the json object like {this.state.data.frontPage.map()} .map json object 像{this.state.data.frontPage.map()}
.or fix your JSON to be exported as an array, and you won't need to change your mapping .或修复您的 JSON 以导出为数组，您无需更改映射
export default [
{
"Id": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"UserDataQuestions": [
{
"Id": 76,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Adresse inkl. postnummer og by",
"QuestionType": "TextBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "FullAddress",
"FieldResponse": null,
"OrderBy": 4,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": []
},
{
"Id": 69,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du hjemmeboende børn?",
"QuestionType": "Radio",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "field30",
"FieldResponse": null,
"OrderBy": 5,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10608,
"Value": "Ja",
"Description": "Ja",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 69
},
{
"Id": 10609,
"Value": "Nej",
"Description": "Nej",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 69
}
]
},
{
"Id": 68,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du børn?",
"QuestionType": "CheckBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q68",
"FieldResponse": null,
"OrderBy": 7,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10601,
"Value": "Ingen børn",
"Description": "Ingen børn",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10602,
"Value": "Ja i alderen 0-3 år",
"Description": "Ja i alderen 0-3 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10603,
"Value": "Ja i alderen 4-6 år",
"Description": "Ja i alderen 4-6 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10604,
"Value": "Ja i alderen 7-9 år",
"Description": "Ja i alderen 7-9 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10605,
"Value": "Ja i alderen 10-13 år",
"Description": "Ja i alderen 10-13 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10606,
"Value": "Ja i alderen 14-18 år",
"Description": "Ja i alderen 14-18 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10607,
"Value": "Ja over 18 år.",
"Description": "Ja over 18 år.",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 7,
"EarnMoreServiceQuestionId": 68
}
]
},
{
"Id": 6,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Indkomst (for hele din husstand, i alt pr. år før skat)",
"QuestionType": "DropDown",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q6",
"FieldResponse": null,
"OrderBy": 8,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10012,
"Value": "Indtil 199.999 kr.",
"Description": "Indtil 199.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10013,
"Value": "200.000 - 399.999 kr.",
"Description": "200.000 - 399.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10014,
"Value": "400.000 - 749.999 kr.",
"Description": "400.000 - 749.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10015,
"Value": "750.000 - 999.999 kr.",
"Description": "750.000 - 999.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10016,
"Value": "1.000.000 kr. eller mere",
"Description": "1.000.000 kr. eller mere",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10209,
"Value": "Ønsker ikke at oplyse",
"Description": "Ønsker ikke at oplyse",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 6
}
]
}
]
},
"AllowSecondClick": true,
"RemainingDays": 3668.0,
"ServiceUserStatus": "Completed",
"ShowQuarantineWarning": false,
"PartnerId": 0,
"SoldOutStatus": null,
]
-- EDIT -- - 编辑 -
Following the comments and see there is a requirement wheter question type should be displayed, It's not only access of JSON it's needed, it's the treatment of the data.在评论之后看到有一个要求是否应该显示问题类型，它不仅需要 JSON 的访问，还需要对数据的处理。
You need more treatment than just mapping your data.I recommend returning a render function to be able to do the correct return of what do you want.您需要的不仅仅是映射数据。我建议返回渲染 function 以便能够正确返回您想要的内容。 eg:例如：
import React, { Component } from 'react';
import frontPage from './dummy';
export default class DummyForm extends Component {
constructor(props) {
super(props);
this.state = {
field: '',
checkBox: '',
options: '',
radioField: '',
error: '',
data: []
};
}
componentDidMount() {
this.setState({
data: frontPage
});
}
render_questions(element) {
// to-do: treat your data here on the type of questions you want to render
// If you want any, just return elm.UseDataQuestions
const questionType = element.map(elm =>
elm.UserDataQuestions.find(question => question === 'question')
);
return questionType.map(value => (
<select className="custom-select" id="inputGroupSelect01">
<option key={i}>{value.QuestionText}</option>
</select>
));
}
render() {
console.log(frontPage);
return (
<React.Fragment>{this.state.data.map((x, i) => this.render_questions(x))}</React.Fragment>
);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何根据react js中的id依次显示一个api的数据？ - How can i display data of an api one after another on the basis of id in react js.?
将本地文件中的 json 数据加载到 React JS 中 - loading json data from local file into React JS
如何在反应 js 中单击单选按钮时显示与 api 不同的值？ - How to display different value from the api on radio button click in react js.?
反应JS。 如何在对象内部显示图像？ - React JS. How can I display the image inside the object?
如何将本地 JSON 文件中的数据显示到 HTML 表中？ - How to display data from local JSON file to HTML table?
如何显示本地 Json 文件中的数据（图像） - How to display data(images) from a local Json file
显示本地JSON文件中的数据 - Display data from a local JSON file
在网页上显示本地json文件的数据 - Display data from local json file on webpage
如何在 React js 中访问 api 中的对象数组？ - How to access array of objects from the api in react js.?
如何在 React JS 中显示这个 JSON 数据？ - how Display this JSON Data in React JS?
相关标签