React将对象数组作为表单数据发送

React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。

当需要将对象数组作为表单数据发送时，可以通过以下步骤来实现：

创建一个表单组件，并在组件的状态中定义一个数组变量，用于存储对象数组的数据。

import React, { useState } from 'react';

const FormComponent = () => {
  const [data, setData] = useState([]);

  // 处理表单提交事件
  const handleSubmit = (e) => {
    e.preventDefault();
    // 发送数据到服务器或其他处理逻辑
    console.log(data);
  };

  // 处理表单输入变化事件
  const handleChange = (e, index) => {
    const { name, value } = e.target;
    const newData = [...data];
    newData[index] = { ...newData[index], [name]: value };
    setData(newData);
  };

  // 添加新的表单项
  const addFormItem = () => {
    setData([...data, {}]);
  };

  // 移除表单项
  const removeFormItem = (index) => {
    const newData = [...data];
    newData.splice(index, 1);
    setData(newData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {data.map((item, index) => (
        <div key={index}>
          <input
            type="text"
            name="name"
            value={item.name || ''}
            onChange={(e) => handleChange(e, index)}
          />
          <input
            type="text"
            name="value"
            value={item.value || ''}
            onChange={(e) => handleChange(e, index)}
          />
          <button type="button" onClick={() => removeFormItem(index)}>
            移除
          </button>
        </div>
      ))}
      <button type="button" onClick={addFormItem}>
        添加
      </button>
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

在表单组件中，使用useState钩子来定义一个状态变量data，初始值为空数组。data用于存储对象数组的数据。
在表单组件的渲染部分，使用map方法遍历data数组，生成表单项。每个表单项包含两个输入框，分别用于输入对象的name和value属性。同时，为每个输入框绑定onChange事件，当输入框的值发生变化时，调用handleChange函数更新对应的对象数据。
在表单组件的渲染部分，添加"添加"和"移除"按钮。点击"添加"按钮时，调用addFormItem函数，在data数组末尾添加一个空对象，从而生成新的表单项。点击"移除"按钮时，调用removeFormItem函数，移除对应的表单项。
在表单组件的渲染部分，添加"提交"按钮，并为表单的onSubmit事件绑定handleSubmit函数。handleSubmit函数用于处理表单的提交事件，可以在该函数中将数据发送到服务器或进行其他处理逻辑。