Javascript 如何显示带或不带React Hook表单的select输入的当前值？

我正在开发一个Ionic React应用程序，我应该使用表单更新端点中的一些数据。打开表单时，必须显示输入的当前值。我面临选择输入的困难。当我打开表单时，“标题”和“称呼”上没有选择任何内容

带有反应钩形式：

import {
  IonContent,
  IonPage,
  IonItem,
  IonLabel,
  IonButton,
  IonInput,
  IonSelect,
  IonSelectOption,
} from "@ionic/react";
import "../Home.css";
import React, { useState, useEffect } from "react";
import AuthContext from "../../my-context";
import { useHistory } from "react-router-dom";
import axios from "axios";
import { useForm } from "react-hook-form";

const ChangeYourData: React.FC = () => {
  const {
    salutationId,
    setSalutationId,
    title,
    setTitle,
  } = React.useContext(AuthContext);

  const history = useHistory();

  const {
    control,
    register,
    handleSubmit,
    formState: { errors },
    getValues,
  } = useForm({
    mode: "onChange",
  });

  const updateCoreData = () => {
    const data = {
      salutationId: getValues("salutationId"),
      titleId: getValues("title"),
    };

    axios
      .put("/xx/update", data)
      .then((response) => {
        setTitle(response.data.title);
        setSalutationId(response.data.salutation);
        return response.data;
      })
      .catch((error) => {
        setMessage(
          "Sth is wrong!"
        );
        setIserror(true);
      });
  };
 

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
          <h1>My Data </h1>
          <form className="ion-padding" onSubmit={handleSubmit(updateCoreData)}>
            <IonItem>
              <IonLabel position="floating">Title</IonLabel>
              <IonSelect
                {...register("title")}
                defaultValue={title}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Dr</IonSelectOption>
                <IonSelectOption value="2">Ing</IonSelectOption>
                <IonSelectOption value="3">Prof</IonSelectOption>
                <IonSelectOption value="4">Prof.Dr</IonSelectOption>
              </IonSelect>
            </IonItem>
            <IonItem>
              <IonLabel position="floating">Salutation</IonLabel>
              <IonSelect
                {...register("salutationId")}
                defaultValue={salutationId}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Mr.</IonSelectOption>
                <IonSelectOption value="2">Mrs.</IonSelectOption>
                <IonSelectOption value="3">Ms.</IonSelectOption>
                <IonSelectOption value="4">Family</IonSelectOption>
              </IonSelect>
            </IonItem>

            <IonButton
              className="ion-margin-top"
              type="submit"
              expand="block"
            >
              Save
            </IonButton>
          </form>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default ChangeYourData;

import {
  IonContent,
  IonPage,
  IonItem,
  IonLabel,
  IonButton,
  IonInput,
  IonSelect,
  IonSelectOption,
} from "@ionic/react";
import "../Home.css";
import React, { useState, useEffect } from "react";
import AuthContext from "../../my-context";
import { useHistory } from "react-router-dom";
import axios from "axios";
import { useForm } from "react-hook-form";

const ChangeYourData: React.FC = () => {
  const {
    salutationId,
    setSalutationId,
    title,
    setTitle,
  } = React.useContext(AuthContext);

  const history = useHistory();

  const updateCoreData = () => {
    const data = {
      salutationId: salutationId,
      titleId: title,
    };

    axios
      .put("/xx/update", data)
      .then((response) => {
        setTitle(response.data.title);
        setSalutationId(response.data.salutation);
        return response.data;
      })
      .catch((error) => {
        setMessage(
          "Sth is wrong!"
        );
        setIserror(true);
      });
  };
 

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
          <h1>My Data </h1>
          <form className="ion-padding">
            <IonItem>
              <IonLabel position="floating">Title</IonLabel>
              <IonSelect
                value={Object.values(title)}
                onIonChange={(e) => setTitle(e.detail.value!)}
                
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Dr</IonSelectOption>
                <IonSelectOption value="2">Ing</IonSelectOption>
                <IonSelectOption value="3">Prof</IonSelectOption>
                <IonSelectOption value="4">Prof.Dr</IonSelectOption>
              </IonSelect>
            </IonItem>
            <IonItem>
              <IonLabel position="floating">Salutation</IonLabel>
              <IonSelect
                value={Object.values(salutationId)}
                onIonChange={(e) => setSalutationId(e.detail.value!)}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Mr.</IonSelectOption>
                <IonSelectOption value="2">Mrs.</IonSelectOption>
                <IonSelectOption value="3">Ms.</IonSelectOption>
                <IonSelectOption value="4">Family</IonSelectOption>
              </IonSelect>
            </IonItem>

            <IonButton
              className="ion-margin-top"
              type="submit"
              expand="block"
              onClick={(e) => {
                e.preventDefault();
                updateCoreData();
                history.goBack();
              }}
            >
              Save
            </IonButton>
          </form>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default ChangeYourData;

Title和saltationid是对象，我无法在后端更改它们。我想我可以这样访问并展示他们的价值：

value={Object.values(salutationId)}

但在这种情况下，当我尝试编辑表单时，会出现以下错误：

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

你觉得怎么样

“反应钩形式”：“^7.1.1”，解决方案是：

值（标题）返回数组

使用以下技巧将

Object.values（title）

转换为字符串：

value={"" + Object.values(title)}

离子选择项：

<IonItem>
              <IonLabel position="floating">Title</IonLabel>
              <IonSelect
                value={"" +Object.values(title)}
                {...register("title")}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Dr</IonSelectOption>
                <IonSelectOption value="2">Ing</IonSelectOption>
                <IonSelectOption value="3">Prof</IonSelectOption>
                <IonSelectOption value="4">Prof.Dr</IonSelectOption>
              </IonSelect>
            </IonItem>
            <IonItem>

标题
博士
英
教授
教授博士

<IonItem>
              <IonLabel position="floating">Title</IonLabel>
              <IonSelect
                value={"" +Object.values(title)}
                {...register("title")}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Dr</IonSelectOption>
                <IonSelectOption value="2">Ing</IonSelectOption>
                <IonSelectOption value="3">Prof</IonSelectOption>
                <IonSelectOption value="4">Prof.Dr</IonSelectOption>
              </IonSelect>
            </IonItem>
            <IonItem>