如何在有或没有 React Hook Form 的情况下显示选择输入的当前值？答案

【问题标题】：How to show current values for select inputs with or without React Hook Form?如何在有或没有 React Hook Form 的情况下显示选择输入的当前值？
【发布时间】：2021-04-26 07:13:30
【问题描述】：

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

使用 React Hook 表单：

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;

没有 React Hook 表单：

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;

我如何显示选择输入的当前值，考虑到：

{JSON.stringify(salutationId)} ==> {"1":"Mr"}

{JSON.stringify(title)} ==> {"1":"Dr"}

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

value={Object.values(salutationId)}

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

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

你怎么看？

"react-hook-form": "^7.1.1",

【问题讨论】：

标签： javascript reactjs typescript ionic-framework react-hook-form

【解决方案1】：

解决办法是：

Object.values(title) 返回数组。

使用此技巧将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>

【讨论】：