我已经在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;
2条答案
按热度按时间h43kikqp1#
当你每次Map所有问题时,你会根据你的数据集得到下面两个问题对象中的一个。
或
所以你需要检查问题的answerType是radio还是text。因此,你需要为此设置条件。
(Note*
1.如果有多个答案类型,当您将此问题对象数据作为prop传递时,最好有一个单独的组件返回呈现的问题和选项。
1.总是提供关键的html元素,你是在Map内渲染任何其他循环。它将帮助React区分和区分元素,提高其在虚拟和真实的DOM之间区分时的性能。)
更新后的组件是这样的。
ny6fqffe2#
question
是questions
内部的一个对象,而不是数组本身,因此您不需要Map每个问题。直接使用您感兴趣的属性:{questionText}
、{question.answerOptions.map(answ => ...}
。