反应钩子形式渲染太多次

Question

我正在尝试做这样的事情。 当用户单击编辑按钮时，将出现表单字段，用户可以编辑数据。否则用户只能查看数据。 我遇到了麻烦，当用户不想编辑表单并单击取消按钮时，页面开始呈现与页面总表单字段一样多的次数。

在我的原始表单上，我有 80 多个表单字段，当用户单击取消按钮页面时变得非常慢。

当我删除 参考={注册} 从我的页面然后表单不会多次呈现，但表单不会与数据一起提交。 有没有办法停止额外的渲染？ 这是我的代码和逻辑。

感谢您的关注。

import React, { useState } from "react";

import { useForm } from "react-hook-form";

function Test() {
   const { register, handleSubmit } = useForm();
   const [edit, setEdit] = useState(false);
   const onSubmit = (data) => {
   console.log(data);
};
return (
<div className="App">
  <header className="App-header">
    {console.log("I am redering.")}
    <form onSubmit={handleSubmit(onSubmit)}>
      <a
        href=""
        onClick={(e) => {
          setEdit(!edit);
          e.preventDefault();
        }}
      >
        {edit ? "Cancel" : "Edit"}
      </a>
      {edit && (
        <p>
          <input
            type="text"
            name="email"
            ref={register}
            placeholder="Email"
          />
        </p>
      )}
      {edit && (
        <p>
          <input
            type="text"
            name="firstname"
            ref={register}
            placeholder="First Name"
          />
        </p>
      )}
      {edit && (
        <p>
          <input
            type="text"
            name="lastname"
            ref={register}
            placeholder="Last Name"
          />
        </p>
      )}
      {edit && (
        <>
          <input
            type="checkbox"
            name="contact[]"
            id="contact-one"
            value="1"
            ref={register}
          />
          <label htmlFor="contact-one">One</label>
        </>
      )}

      {edit && (
        <>
          <input
            type="checkbox"
            name="contact[]"
            id="contact-two"
            value="2"
            ref={register}
          />
          <label htmlFor="contact-two">Two</label>
        </>
      )}

      {edit && <button type="submit">Submit</button>}
      {edit === false && (
        <>
          <p>{`My First Name`}</p>
          <p>{`My Last Name`}</p>
          <p>{`My Email address`}</p>
          <p>{`My Contacts`}</p>
        </>
      )}
    </form>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
  </div>
 );
}

export default Test;

Answer 1

<form onSubmit={handleSubmit(onSubmit)}>

这是一个函数调用，这意味着它会立即被调用——表单是在 DOM 上创建的，您的事件侦听器需要获取对该函数的引用，该函数将在事件发生时被调用，为此您将其包装起来另一个匿名函数中的函数调用。然后该函数将在提交事件发生时被调用。所以你需要这样做

<form onSubmit={()=>{handleSubmit(onSubmit)}}>

此外，由于这是一个提交事件，您可能希望停止刷新页面的默认行为。像这样

<form onSubmit={(ev)=>{
  ev.preventDefault()
  handleSubmit(onSubmit)}}>

更新

我没有正确查看 JSX。您可能做错了几件事

1. 使用 ref 获取输入值而不是状态
2. 在接受任何类型的输入时，您希望将这些字段转换为控制组件Officila docs on controlled components 我建议您先了解并说明这一点，这将对您有很大帮助。 React 文档在示例代码中仍然使用类组件，但只是使用 use state 而不是 this.state 作为状态变量