更改表单数据的结构以适应反应中所需的 json POST

Question

我正在尝试创建一个从表单调用的 post 请求，该表单接受来自字段的用户输入，但是 post 请求需要特定的数据格式并且包含以下部分嵌套如下：

{
  "Product": {
    "name": "App1",
    "version": "1.0.0",
    "location": "C:\app1"
  },
  "Owner": {
    "name": "John Smith",
    "email": "john@smith.com"
  },
  "Clients": [
    {
      "name": "client1",
      "location": {"address": "123 Jon street", "contact_number": "123456789"}
    },
    {
      "name": "client2",
      "location": {"address": "123 Jon street", "contact_number": "123456789"}
    }
  ]
}

除客户列表外，以上所有内容均来自用户在表单中输入的内容。我的app.js低于

import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import clients from './components/clients';
import axios from "axios";

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => {
       axios
        .post('/api/product',
            data,
            { headers: { 'Content-Type': 'application/json' }}
         )
        .then(response => {console.log(response.data)})
        .catch(error => {console.log(error.data)});
    };


  //const onSubmit = data => console.log(data);
  return (
    <div>
      <h3>Client listing</h3>
      <clients />
      <h3>Owner Details</h3>
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Owner name: </label><input type="text" placeholder="Owner name" {...register("Ownernane", { required: "Invalid Entry", maxLength: 80 }) } /><p>{errors.Ownernane?.message}</p>
        <label>EMail: </label><input type="text" placeholder="Email" {...register("Email", { required: "Invalid Entry", pattern: /^\S+@\S+$/i }) } /><p>{errors.Email?.message}</p>
        
        <h3>Product details</h3>
        <label>Name: </label><input type="text" placeholder="name" {...register("name", { required: "Invalid Entry", maxLength: 80 }) } /><p>{errors.name?.message}</p>
        <label>Location: </label><input type="text" placeholder="location" {...register("location", { required: "Invalid Entry", maxLength: 100 }) } /><p>{errors.location?.message}</p>
        <label>Version: </label><input type="text" placeholder="version" {...register("version", { required: "Invalid Entry", maxLength: 12 }) } /><p>{errors.version?.message}</p>
        

        <input type="submit" />
      </form>
    </div>
  );
}

有人可以为我指出正确的操作方法吗？我不确定它是否是我使用的术语，但我很难找到这方面的说明并猜测这是一个很常见的事情.非常感谢。

Answer 1

不需要改变数据结构，可以react-hook-form轻松定义字段数组或嵌套字段，这里有一个例子：

 <form onSubmit={handleSubmit(onSubmit)}>
  <label>Owner name: </label>
  <input
    type="text"
    placeholder="Owner name"
    {...register('Owner.name', { required: 'Invalid Entry', maxLength: 80 })}
  />
  <p>{errors.Owner?.name?.message}</p>
  <label>EMail: </label>
  <input
    type="text"
    placeholder="Email"
    {...register('Owner.email', {
      required: 'Invalid Entry',
      pattern: /^\S+@\S+$/i,
    })}
  />
  <p>{errors.Owner?.email?.message}</p>

  <h3>Product details</h3>
  <label>Name: </label>
  <input
    type="text"
    placeholder="name"
    {...register('Clients.0.name', { required: 'Invalid Entry', maxLength: 80 })}
  />
  <p>{errors.Clients?.[0]?.name?.message}</p>
  <label>Location: </label>
  <input
    type="text"
    placeholder="location"
    {...register('Clients.0.location', { required: 'Invalid Entry', maxLength: 100 })}
  />
  <p>{errors.Clients?.[0]?.location?.message}</p>
  
  <input type="submit" value="submit" />
</form>

使用上述结构，发送到onSubmit的数据将具有以下结构：

{
  "Owner":{"name":"value","email":"value"},
  "Clients":[{"name":"value","location":"value"}]
}

更改表单数据的结构以适应反应中所需的 json POST

Changing structure of form data to suit required json POST in react

reactjs

axios

react-hook-form