更改表單資料的結構以適應反應中所需的jsonPOST

我正在嘗試創建一個從接受用戶輸入的表單呼叫的 post 請求，但 post 請求需要特定的資料格式，并且具有如下嵌套的部分：

{
  "Product": {
    "name": "App1",
    "version": "1.0.0",
    "location": "C:\app1"
  },
  "Owner": {
    "name": "John Smith",
    "email": "[email protected]"
  },
  "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>
  );
}

有人可以請我指出如何做到這一點的正確方向嗎？我不確定它是否是我使用的術語，但我很難找到有關此的說明，并猜測這是一件很常見的事情。非常感謝。

uj5u.com熱心網友回復：

不需要改變資料的結構，你可以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"}]
}

標籤：反应 公理 反应钩形

上一篇：undefined不是一個物件（評估'navigation.navigate'）（設備）

下一篇：何時使用Boolean(var1)？