如何在 React js 中显示来自本地 json 文件的数据？

Question

我正在尝试从本地 json 文件中获取响应我已经从外部文件导入数据并将其放置在本地 json 文件中，但是当我尝试在组件中映射数据时它给我一个错误，地图不是一个函数，它不起作用。我还想从内部数组访问一个对象，该对象是 UserDataQuestions 数组并将其映射到我的组件中

我的组件

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

Answer 1

将您的数据文件更改为：

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

Answer 2

您正在尝试访问 JSON 的键 frontPage 内的数组，但您正在尝试将整个 JSON 映射为数组（但事实并非如此。

您可以采用两种方法：

. 将 json 对象映射为 {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 的访问，还需要对数据的处理。

您需要更多的处理，而不仅仅是映射您的 data.I 推荐 return 渲染函数才能正确地 return 您想要的东西。例如：

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

如何在 React js 中显示来自本地 json 文件的数据？

How to display data from a local json file in react js.?

javascript

json

datamapper

reactjs