Reactjs 表单错误后 Ionic React 无法 Select 单选按钮

我有一个表格，这是动态建立使用ionic react 和YUP用于验证，这是基于来自API的信息，但我有一个问题，如果我没有 Select 一个单选按钮，当我按下提交时，单选按钮变得无法点击，这意味着我永远不能得到错误.

我在这里创建了一个使用硬编码的表单而不是动态填充的示例，如果您在不执行任何操作的情况下单击保存，则您将无法 Select 单选按钮，但我无法解决我的问题的来源.

Link to example of my issue个

编辑:

以下是不起作用的代码的主要部分:

import React, { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import {
  IonList,
  IonRadioGroup,
  IonItem,
  IonLabel,
  IonRadio,
  IonButton,
  IonContent,
  IonPage,
  setupIonicReact,
  IonInput
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";
setupIonicReact();

const validationSchema = yup.object().shape({
  q7: yup.string().required("selection is required")
});

export default function App() {
  const {
    register,
    reset,
    getValues,
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(validationSchema),
    mode: "all"
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  // useEffect(() => {
  //   reset({
  //     // q7: "6"
  //   });
  // }, [reset]);

  return (
    <React.Fragment>
      <IonPage className="xion-page" id="main-cntent">
        <IonContent className="ion-padding">
          <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
              <>
                values:{getValues("name")}
                <IonInput {...register("name")}></IonInput>
                error:{errors["q7"]?.message}
                values:{getValues("q7")}
                <Controller
                  control={control}
                  name="q7"
                  render={({ field: { onChange, value, ref } }) => (
                    <>
                      {console.log(value)}
                      <IonList>
                        <IonRadioGroup
                          ref={ref}
                          defaultValue=""
                          // allowEmptySelection={true}
                          value={value ?? ""}
                          onIonChange={({ detail: { value } }) =>
                            onChange(value ?? "")
                          }
                        >
                          <IonItem>
                            <IonLabel>Type 2</IonLabel>
                            <IonRadio value="2" slot="start" />
                          </IonItem>

                          <IonItem>
                            <IonLabel>Type 4</IonLabel>
                            <IonRadio slot="start" value="4" />
                          </IonItem>

                          <IonItem>
                            <IonLabel>Type 6</IonLabel>
                            <IonRadio slot="start" value="6" />
                          </IonItem>
                        </IonRadioGroup>
                      </IonList>
                    </>
                  )}
                />
                <br />
                <IonButton type="submit">Save</IonButton>
              </>
            </form>
          </div>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
}