fix: 質問を追加したときにエラーが発生するのを修正

GiganticMinecraft · Apr 28, 2024 · 01451d8 · 01451d8
1 parent 5f23bb1
commit 01451d8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/src/app/(authed)/admin/forms/create/_components/FormCreateForm.tsx b/src/app/(authed)/admin/forms/create/_components/FormCreateForm.tsx
@@ -69,11 +69,7 @@ const FormCreateForm = () => {
           <Stack spacing={2}>
             <Card>
               <CardContent>
-                <FormSettings
-                  control={control}
-                  register={register}
-                  visibility={visibility}
-                />
+                <FormSettings register={register} visibility={visibility} />
               </CardContent>
               {fields.map((field, index) => (
                 <CardContent key={field.id}>
@@ -105,7 +101,7 @@ const FormCreateForm = () => {
             <Button
               type="button"
               aria-label="質問の追加"
-              onClick={addQuestionButton}
+              onClick={() => addQuestionButton()}
               endIcon={<Add />}
             >
               質問の追加

diff --git a/src/app/(authed)/admin/forms/create/_components/FormSettings.tsx b/src/app/(authed)/admin/forms/create/_components/FormSettings.tsx
@@ -1,9 +1,8 @@
 import { MenuItem, Stack, TextField, Typography } from '@mui/material';
 import type { Form, Visibility } from '../_schema/createFormSchema';
-import type { Control, UseFormRegister } from 'react-hook-form';
+import type { UseFormRegister } from 'react-hook-form';
 
 const FormSettings = (props: {
-  control: Control<Form>;
   register: UseFormRegister<Form>;
   visibility: Visibility;
 }) => {

diff --git a/src/app/(authed)/admin/forms/create/_components/Question.tsx b/src/app/(authed)/admin/forms/create/_components/Question.tsx
@@ -8,8 +8,8 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { useCallback, useEffect } from 'react';
-import { useFieldArray, useWatch } from 'react-hook-form';
+import { useCallback } from 'react';
+import { useController, useFieldArray, useWatch } from 'react-hook-form';
 import type { Form } from '../_schema/createFormSchema';
 import type { Control, UseFormRegister } from 'react-hook-form';
 
@@ -33,10 +33,14 @@ const QuestionComponent = ({
     name: `questions.${questionId}.choices`,
   });
 
+  const { field } = useController({
+    control,
+    name: `questions.${questionId}.question_type`,
+  });
+
   const useWatchQuestionType = useWatch({
     control,
     name: `questions.${questionId}.question_type`,
-    defaultValue: 'TEXT',
   });
 
   const addChoice = useCallback(() => {
@@ -51,16 +55,6 @@ const QuestionComponent = ({
     }
   };
 
-  useEffect(() => {
-    if (useWatchQuestionType === 'TEXT') {
-      removeChoices();
-    } else if (choicesField.length === 0) {
-      // NOTE: choicesField.lengthが0であることを確認しないと
-      // 単一選択 -> 複数選択 -> 単一選択のように変更した場合に選択肢の入力欄が増加してしまう
-      addChoice();
-    }
-  }, [useWatchQuestionType, addChoice, choicesField, removeChoices]);
-
   return (
     <Stack spacing={2}>
       <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
@@ -89,15 +83,30 @@ const QuestionComponent = ({
         required
         defaultValue="TEXT"
         helperText="質問の種類を選択してください。"
+        onChange={(event) => {
+          // NOTE: 単純に onChange 書くと useWatchQuestionType が動作しないので field.onChangeを呼び出す必要がある
+          // ref: https://github.com/orgs/react-hook-form/discussions/9144
+          field.onChange(event);
+
+          if (event.target.value === 'TEXT') {
+            removeChoices();
+          } else if (choicesField.length === 0) {
+            // NOTE: choicesField.lengthが0であることを確認しないと
+            // 単一選択 -> 複数選択 -> 単一選択のように変更した場合に選択肢の入力欄が増加してしまう
+            appendChoices({ choice: '' });
+          }
+        }}
       >
-        <MenuItem value="TEXT">テキスト</MenuItem>
+        <MenuItem onSelect={() => removeChoices()} value="TEXT">
+          テキスト
+        </MenuItem>
         <MenuItem value="SINGLE">単一選択</MenuItem>
         <MenuItem value="MULTIPLE">複数選択</MenuItem>
       </TextField>
       <Button
         variant="outlined"
         startIcon={<Add />}
-        onClick={addChoice}
+        onClick={() => addChoice()}
         disabled={useWatchQuestionType == 'TEXT'}
       >
         選択肢の追加