为什么来自 React 钩子形式的 defaultValue 不能在 React 中工作

Question

我遇到了问题。我正在使用 React Hook Form 在我的装运组件中，一切都进行得很顺利，但是当我尝试对我的装运组件使用 react hook 表单并在这些组件上设置默认值时，它无法正常工作。我的代码如下：

import React, { useContext } from 'react';
import { useForm } from 'react-hook-form';
import { UserContext } from '../../App';
import './Shipment.css';

const Shipment = () => {
const { register, handleSubmit, watch, formState: { errors } } = 
useForm();

const [loggedInUser,setLoggedInUser] = useContext(UserContext);

const onSubmit = data => {
    console.log('form submitted',data);}

console.log(watch("example")); // watch input value by passing the name 
of it

return (
  
  <form className="ship-form" onSubmit={handleSubmit(onSubmit)}>
    {/* <input defaultValue={loggedInUser.email} 
 {...register("example")} /> */}
    <input name="name" defaultValue={loggedInUser.name} 
 {...register("exampleRequired", { required: true })} placeholder="Your 
  Name" />  
    {errors.name && <span className="error">Name is required</span>}
    <input name="email" defaultValue={loggedInUser.email} 
  {...register("exampleRequired", { required: true })} 
  placeholder="Email address"/>  
    {errors.email && <span className="error">Email is required</span>}

    <input name="address" {...register("exampleRequired", { required: 
    true })} placeholder="address"/>  
    
    {errors.address && <span className="error">Address is 
required</span>}
    
    <input name="phone" {...register("exampleRequired", { required: true 
    })} placeholder="Phone number"/>  
    {errors.phone && <span className="error">Phone Number is 
  required</span>}
    
    <input type="submit" />
  </form>
);
};

export default Shipment;

当我尝试使用电子邮件登录时:

我在姓名和电子邮件字段上设置了默认值，但它不起作用，除了姓名

我的控制台只显示名称，但不显示所有数据

实际上我需要所有数据并在特定字段上设置默认值

Answer 1

我认为问题出在这里：

之前

<input name="email" defaultValue={loggedInUser.email} 
  {...register("exampleRequired", { required: true })} 
  placeholder="Email address"/>

之后：

<input defaultValue={loggedInUser.email} 
  {...register("email", { required: true })} 
  placeholder="Email address"/>

你所有的 register 都有相同的名字，这就是它不起作用的原因。

见register API

为什么来自 React 钩子形式的 defaultValue 不能在 React 中工作

Why defaultValue from React hook form can not work in react

forms

firebase

reactjs

react-router

react-hook-form