迭代JSON数据并根据此显示HTML代码

pprl5pva 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(94)

我已经在react中创建了一个调查应用程序，到目前为止，我已经为每个问题编写了每个radiobutton/input到asnwer的代码。问题是我调查了很多问题，并使用这种方法创建了一个巨大的代码。所以我的想法是用json格式编写问题/答案，然后通过迭代来显示它们，然后创建if statament来显示radiobutton或基于answerType的输入的代码。我已经指示显示问题，但我在显示单选按钮或每个问题的输入时遇到问题，并且我得到以下错误：

question.map is not a function
TypeError: question.map is not a function

我还需要跟踪每个答案。在我之前的代码中，我是这样做的

const [answers, setAnswers] = useState({
    answerOne: "",
    answerTwo: "",
  });

  const handleChange = (e) => {
    setAnswers((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

然后加上

onChange={handleChange}

但现在我不知道该怎么做这是我现在的代码：

import React, { useState } from "react";
import "./survey.css";

const MapSurvey = () => {
  const questions = [
    {
      questionText: "First Q",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 },
        { answerText: "Five", value: 5 },
      ],
      answerType: "radio",
    },
    {
      questionText: "Second",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 },
      ],
      answerType: "radio",
    },
    {
      questionText: "Third",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 },
        { answerText: "Five", value: 5 },
      ],
      answerType: "radio",
    },
    {
      questionText: "FirstInput",
      answerType: "text",
    },
  ];
  return (
    <div className="w-full py-[2rem] px-4 bg-white">
      <div className="mx-auto text-center flex flex-col">
        <form>
          {questions.map((question, i) => (
            <div className="flex flex-col p-4 my-4">
              <h2>{question.questionText}</h2>

              {question.map((answ) => (
                <div className="radio mt-3 mb-3">
                  <input
                    name="answerOne"
                    type="radio"
                    id="11"
                    hidden="hidden"
                    value="1"
                  />
                  <label
                    htmlFor="11"
                    className="px-2 py-1 rounded-lg flex justify-left items-center font-medium text-black checked:text-white w-full sm:w-6/12 h-10"
                  >
                    {answ.answerText}
                  </label>
                </div>
              ))}
            </div>
          ))}
        </form>

        <button>Submit</button>
      </div>
    </div>
  );
};

export default MapSurvey;

JSON

来源：https://stackoverflow.com/questions/76086383/iterate-over-json-data-and-show-html-code-according-to-that

2条答案

按热度按时间

h43kikqp1#

当你每次Map所有问题时，你会根据你的数据集得到下面两个问题对象中的一个。

question = {
      questionText: "Second",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 },
      ],
      answerType: "radio",
    }

或

question = {
      questionText: "Third Question",
      answerType: "text",
    }

所以你需要检查问题的answerType是radio还是text。因此，你需要为此设置条件。
(Note*
1.如果有多个答案类型，当您将此问题对象数据作为prop传递时，最好有一个单独的组件返回呈现的问题和选项。
1.总是提供关键的html元素，你是在Map内渲染任何其他循环。它将帮助React区分和区分元素，提高其在虚拟和真实的DOM之间区分时的性能。）
更新后的组件是这样的。

import React, { useState } from "react";

const MapSurvey = () => {
  const [answers, setAnswers] = useState({});

  const handleChange = e => {
    setAnswers(prev => ({ ...prev, [e.target.name]: e.target.value }));
    setTimeout(() => console.log(answers), 1000);
  };

  const questions = [
    {
      questionText: "First Q",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 },
        { answerText: "Five", value: 5 }
      ],
      answerType: "radio"
    },
    {
      questionText: "Second",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 }
      ],
      answerType: "radio"
    },
    {
      questionText: "Third",
      answerOptions: [
        { answerText: "One", value: 1 },
        { answerText: "Two", value: 2 },
        { answerText: "Three", value: 3 },
        { answerText: "Four", value: 4 },
        { answerText: "Five", value: 5 }
      ],
      answerType: "radio"
    },
    {
      questionText: "FirstInput",
      answerType: "text"
    }
  ];
  return (
    <div className="w-full py-[2rem] px-4 bg-white">
      <div>
        <form>
          {questions.map((question, idx) => (
            <div key={`question-no-${idx}`} className="flex flex-col p-4 my-4">
              <span className="text-lg font-bold">{question.questionText}</span>

              {question.answerType === "radio" ? (
                <div className="flex gap-2">
                  {question.answerOptions.map((option, optionIdx) => (
                    <div key={`question_${idx}_option_${optionIdx}`} className="mt-3 mb-3">
                      <input
                        name={`question_${idx}`}
                        type={question.answerType}
                        id={`question_${optionIdx}`}
                        onChange={handleChange}
                        value={option.value}
                      />
                      <label
                        htmlFor={`question_${idx}`}
                        className="px-2 py-1 rounded-lg flex justify-left items-center font-medium text-black checked:text-white w-full sm:w-6/12 h-10"
                      >
                        {option.answerText}
                      </label>
                    </div>
                  ))}
                </div>
              ) : (
                <>
                  <input
                    name={`question_${idx}`}
                    type={question.answerType}
                    id={`question_${idx}`}
                    onChange={handleChange}
                  />
                </>
              )}
            </div>
          ))}
        </form>

        <button>Submit</button>
      </div>
    </div>
  );
};

export default MapSurvey;

赞(0）回复(0）举报 2023-05-02

ny6fqffe2#

question是questions内部的一个对象，而不是数组本身，因此您不需要Map每个问题。直接使用您感兴趣的属性：{questionText}、{question.answerOptions.map(answ => ...}。

赞(0）回复(0）举报 2023-05-02