如何使用react获取结构化数组(嵌套)的输入，数组大小将动态确定

import React, { useState } from 'react';

const ArrayInput = () => {
  const [array, setArray] = useState([{ value: '' }]); // 初始数组为空

  // 处理输入框变化事件
  const handleInputChange = (index, event) => {
    const values = [...array];
    values[index].value = event.target.value;
    setArray(values);
  };

  // 添加新的输入框
  const handleAddInput = () => {
    setArray([...array, { value: '' }]);
  };

  // 移除输入框
  const handleRemoveInput = (index) => {
    const values = [...array];
    values.splice(index, 1);
    setArray(values);
  };

  // 提交表单处理
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(array); // 在这里处理结构化数组的输入
  };

  return (
    <form onSubmit={handleSubmit}>
      {array.map((item, index) => (
        <div key={index}>
          <input
            type="text"
            value={item.value}
            onChange={(event) => handleInputChange(index, event)}
          />
          <button type="button" onClick={() => handleRemoveInput(index)}>
            移除
          </button>
        </div>
      ))}
      <button type="button" onClick={handleAddInput}>
        添加输入框
      </button>
      <button type="submit">提交</button>
    </form>
  );
};

export default ArrayInput;