在react-hook-form中react-table v7

i am working on a complex react form where it has few controlled inputs along with grid/table. currently i am using react-hook-form for validation.
here is my mockup. idea here is show grid as required until user adds some data. user can add/remove data by clicking "+" or "-" buttons.


when i submit here is what i see in submitted data

{
  "fname": "sasa",
  "lname": "asasasa"
} 

这是预期的输出

{
  "fname": "sasa",
  "lname": "asasasa",
  "localAddress":[
    {
      "street1":"street1",
      "street2":"street2",
      "city":"city"
    },
    {
      "street1":"street2",
      "street2":"street2",
      "city":"city"
    }
  ]
} 

这是我的代码和盒子
代码沙箱 https://codesandbox.io/s/gifted-moon-6qpvh

不知道如何将react-table（或任何表组件）与react-hook-form（或任何react形式）集成。使用“react-table”构建表单对我来说是必须的。

感谢任何帮助。

正如在入门文档 https://react-hook-form.com/get-started在“使用 UI 库”部分中：

选项 3：我们可以使用以下命令设置自定义寄存器useEffect通过以下方式挂钩并更新值setValue.

因此，您的情况需要执行以下操作：

export default function App() {
  const { register, handleSubmit, setValue } = useForm();
  // ... 

  React.useEffect(() => {
    register({ name: "localaddress" });
  }, [register]);

  const addLocalAddress = function() {
    // ... 
    setValue("localaddress", d);
    setLocalAddress(d);
  };

  // ... 
}

有了这个，你需要摆脱Controller通过替换：

<Controller
  name="tag"
  control={methods.control}
  as={
    <Table1
      name="tag"
      ref={methods.register}
      columns={columns}
      data={localAddress}
      {...methods}
    />
  }
/>;

有了这个：

<Table1 columns={columns} data={localAddress} />

应该是这样。当然还有sandbox https://codesandbox.io/s/dreamy-haze-pj0t2?file=/src/App.js:2217-2265.