根据 JSON 中的值将 JSON 应用于 TextFields 或选择

Question

我从 API 中提取了一堆 JSON 个组。每个组包含 1 个或多个 questions 个对象。我需要在 MUI TextField 或 Select 中将每个问题及其对应的 response 附加到 textField，这需要根据 QuestionType 值来决定。

下面是我如何尝试获取数据以显示到 TextField。 TextFields 正在填充 [object Object]，就像现在一样。

const [questions, setQuestions] = useState("");

const fetchQuestions = async () => {
   setQuestions(
      await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details/questions`)
            .then((response) => response.json())
   );
};

...

{questions["question_groups"]?.map((row) => (
   <TextField
      fullWidth
      multiline
      className="text-field"
      value={row?.questions || ""}
      variant="outlined"
      margin="normal"
      label={row["GroupName"]}
   />
))}

这是我的一个例子JSON。实际上，question_groups

中可能有 20 个组

{
   "question_groups": [
      {
         "GroupName": "DDD",
         "questions": [
            {
               "Question": "1. Do you need a drink?",
               "QuestionType": "Select",
               "Response": null,
               "Choices": [
                  "Yes",
                  "No"
               ]
            }
         ]
      },
      {
         "GroupName": "FED",
         "questions": [
            {
               "Question": "2. What do you want to drink?",
               "QuestionType": "Text",
               "Response": null,
               "Choices": [
               ]
            },
            {
              "Question": "3. Do you want something to eat?",
               "QuestionType": "Text",
               "Response": "I would like steak",
               "Choices": [
               ] 
            }
         ]
      }
   ],
}

如有任何帮助或建议，我们将不胜感激。

Answer 1

为每个 QuestionType 创建两个组件。

const SelectQuestion = ({ question }) => {
 return (
        <Box>
          <TextField value={question?.Question || ""} />
          <Select label="Question" >
            <MenuItem value={question?.Choices || ""}>{question?.Choices || ""}</MenuItem>
          </Select>
          <Divider />
        </Box>
      );
};

const TextQuestion = ({ question }) => {
      return (
        <Box>
          <TextField value={question?.Question || ""}/>
          <TextField />
          <Divider />
        </Box>
      );
};

映射question_groups的数组，然后根据QuestionType的值，映射每组questions的数组和return其中一种组件类型

const questionComps = questions["question_groups"]?.map((group, i) => {
        return group["questions"]?.map((question, i) => {
            return question["QuestionType"] === "Text" ? (
                <Box>
                    <TextQuestion key={`${i}${question.Question}`} question={question} />
                    <Divider />
                </Box>
            ) : (
                <Box>
                    <SelectQuestion key={`${i}${question.Question}`} question={question} />
                    <Divider />
                </Box>
            );
        });
    });

现在渲染问题组件

return (
        <div>{questionComps}</div>
    )

根据 JSON 中的值将 JSON 应用于 TextFields 或选择

Apply JSON to TextFields or Selects based on a value in the JSON

javascript

json

reactjs

material-ui