无法从 Hook 中提取来自 React 的数据

Question

会员注册-form.tsx

      import OrderList from "../components/orderList";
      import { useForm, SubmitHandler } from "react-hook-form";
      const MemberRegistration = () => {
          const [values, setValues] = React.useState({
           
          });
        
          
        
          const { register, handleSubmit } = useForm();
          const [age, setAge] = React.useState("");
         
          return (
            <form onSubmit={handleSubmit(data => console.log(data))}>
              <OrderList />
              <input type="submit" />
            </form>
          );
        };
        
       export default MemberRegistration;

orderList.tsx

import { useEffect, useState } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import hoc from "./hoc";
import { TextField, Stack } from "@mui/material";
import { Box } from "@mui/system";
 const OrderDetails = (props) => {

  
  return (
    <Stack direction="row" spacing={1} >
 
      <TextField   {...props.register(`test.${props.index}.x`)} ></TextField>
      <TextField   {...props.register(`test.${props.index}.y`)}></TextField>
      <TextField   {...props.register(`test.${props.index}.z`)}></TextField>
      <button onClick={() => props.removeindex(props.index)} type="button">
      Delete
      </button>
    </Stack>
  );
};
export default hoc(OrderDetails);

hoc.tsx

import { useFieldArray, useForm } from "react-hook-form";
    const hoc = (WrappedComponent) => {
      return (props) => {
        const { register, control, handleSubmit, reset, watch } = useForm({
          defaultValues: {
            test: [{ firstName: "Bill", lastName: "Luo" }]
          }
        });
    
        const { fields, append, prepend, remove } = useFieldArray({
          control,
          name: "test"
        });
    
        return (
          <form >
            <ul>
              {fields.map((item, index) => (
                <WrappedComponent
                  key={item.id}
                  item={item}
                  removeindex={remove}
                  index={index} 
                  register = {register}
                />
              ))}
            </ul>
            <section>
              <button
                type="button"
                onClick={() => {
                  append({ firstName: "appendBill", lastName: "appendLuo" });
                }}
              >
                append
              </button>
    
            
            </section>
          </form>
        );
      };
    };
    export default hoc;

在上面的代码中，我将 OrderList 组件 包裹在 hoc（高阶组件）中以显示动态生成的内容。member-registration-form.tsx 页面是组件所在的页面 render.It 工作得很好，因为我 expected.But 我无法提取提交按钮时输入的数据是 clicked.It 给我一个空数组。

code sandbox

Answer 1

您正在使用 useForm() 挂钩的两个不同实例。提交表单时未获取任何数据的原因是因为您在表单组件的第一个实例中使用 handleSubmit() 函数，然后在临时组件中的第二个实例中注册字段。您要么需要将 register 函数作为 prop 向下传递，要么可以向下传递整个 useform 函数，但您不能创建 2 个不同的实例并期望它们相互通信。您可以执行以下操作：

会员登记表

import OrderList from "./orderList";
import { useForm, SubmitHandler } from "react-hook-form";
import * as React from "react";

const MemberRegistration = () => {
  const [values, setValues] = React.useState({
    amount: "",
    password: "",
    weight: "",
    weightRange: "",
    showPassword: false
  });

  const {register, control, handleSubmit} = useForm({
    defaultValues: {
      test: [{ firstName: "Bill", lastName: "Luo" }]
    }
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <OrderList register={register} control={control}/>
      <input type="submit" />
    </form>
  );
};

export default MemberRegistration;

订单列表

import * as React from "react";

import hoc from "./hoc";
/**
 * 
 */
const OrderDetails = (props) => {
  return (
    <div>
      <input {...props.register(`test.${props.index}.firstName`)} />

      <button onClick={() => props.removeindex(props.index)} type="button">
        Delete
      </button>
    </div>
  );
};
export default hoc(OrderDetails);

临时

import { useFieldArray } from "react-hook-form";
import * as React from "react";

const hoc = (WrappedComponent) => {
  return (props) => {
    const { register, control } = props;

    const { fields, append, remove } = useFieldArray({
      control,
      name: "test"
    });

    return (
      <div>
        <ul>
          {fields.map((item, index) => (
            <WrappedComponent
              key={item.id}
              item={item}
              removeindex={remove}
              index={index}
              register={register}
            />
          ))}
        </ul>
        <section>
          <button
            type="button"
            onClick={() => {
              append({ firstName: "appendBill", lastName: "appendLuo" });
            }}
          >
            append
          </button>
        </section>
      </div>
    );
  };
};

export default hoc;

无法从 Hook 中提取来自 React 的数据

cannot extract the data from React from Hook

reactjs

react-forms