繁体   English   中英

如何在 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不起作用。 我也想从内部数组访问 object,它是 UserDataQuestions 数组和 map 它在我的组件中

我的组件

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>
    );
  }
}

我的 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
}
]
}

将您的数据文件更改为:

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,
]

您正在尝试访问 JSON 的关键frontPage中的数组,但您正在尝试 map 整个 JSON 就好像它不是一个数组一样(但它不是)。

你可以做2种方法:

.map json object 像{this.state.data.frontPage.map()}

.或修复您的 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,
]

- 编辑 -

在评论之后看到有一个要求是否应该显示问题类型,它不仅需要 JSON 的访问,还需要对数据的处理。

您需要的不仅仅是映射数据。我建议返回渲染 function 以便能够正确返回您想要的内容。 例如:

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM