我正在尝试用typescript创建一个react表单。我想通过表单创建一个对象数组。下面是界面。

interface FormValues {
    featureList: [
        {
            featureName: string,
            deliverables: string[]
        }
    ];
}

我已经创建了用于捕获这两个字段的数据的函数。

// Function to handle the feature list and its inner components
    const handleFeatureListChange = (
        index: number,
        event: React.ChangeEvent<HTMLInputElement>
    ) => {
        const { name, value } = event.target;
        const featureList = [...formValues.featureList];
        if (name === 'featureName') {
            featureList[index] = { ...featureList[index], featureName: value };
        } else {
            const deliverables = [...featureList[index].deliverables];
            deliverables[Number(name)] = value;
            featureList[index] = { ...featureList[index], deliverables };
        }
        setFormValues({ ...formValues, featureList });
    };

    // Function to add the featuresName
    const handleAddFeature = () => {
        setFormValues({
            ...formValues,
            featureList: [...formValues.featureList, { featureName: '', deliverables: [''] }],
        });
    };

但是在handleFeatureListChange函数中得到setFormValues({ ...formValues, featureList });上的错误。错误是：
键入“[{ featureName：字符串;可交付成果：string[]; }，{ featureName：字符串;可交付成果：string[]; }]'不可分配给类型'[{ featureName：字符串;可交付成果：string[]; }]'。源有2个元素，但目标只允许1个。
和...formValues, featureList:在featureList上的handleAddFeature函数中我得到了错误。错误是：
键入“[{ featureName：字符串;可交付成果：string[]; }，{ featureName：字符串;可交付成果：string[]; }]'不可分配给类型'[{ featureName：字符串;可交付成果：string[]; }]'。源有2个元素，但目标只允许1个。
下面是我的代码react添加值的代码：

<div className='mb-3'>
  <div className="row">
    {formValues.featureList.map((feature, index) => (
      <div key={index}>
        <input name="featureName" value={feature.featureName} onChange={(e) => handleFeatureListChange(index, e)} />
          {feature.deliverables.map((deliverable, dIndex) => (
            <input key={dIndex} name={`${dIndex}`} value={deliverable} onChange={(e) => handleFeatureListChange(index, e)} />
          ))}
        </div>
      ))}
        <button type="button" onClick={handleAddFeature}>Add Feature</button>
    </div>
  </div>

我正在尝试获得这种类型的输出：

"featureList": [
        {
          "featureName": "Administration Services",
          "deliverables": ["Provision, build and configure new server infrastructure.", "Add, modify, and delete System configuration.", "Server Compute Resource Management."]
        },
        {
          "featureName": "Maintenance and Support Services",
          "deliverables": ["Provide 24X7 ITIL based helpdesk to manage incidents, changes, and troubleshoot problems.", "Provide incident management support which includes:", "Call logging, tracking, and reporting.", "Incident escalation and circumvention according to documented SOP.", "Employ standardized change management processes and procedures for prompt and efficient handling of all changes.", "Provide problem management for failures preventing incident recurrence through comprehensive RCA and permanent fixes"]
        },
        {
          "featureName": "Monitoring and Alerting Services",
          "deliverables": ["Monitor server utilizations."]
        },
        {
          "featureName": "Reporting Services",
          "deliverables": ["Service availability", "Call statistics and incident reports."]
        },
]