如何在从表单获取用户输入的对象数组中执行setState操作

import React, { Component } from 'react';

class FormComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInputArray: [], // 存储用户输入的对象数组
    };
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    const { userInputArray } = this.state;
    const updatedArray = [...userInputArray]; // 创建一个新的数组，避免直接修改原数组

    // 更新用户输入的对象的对应属性值
    const updatedObject = {
      ...updatedArray[name], // 获取原对象的所有属性值
      [name]: value, // 更新指定属性的值
    };

    updatedArray[name] = updatedObject; // 更新数组中的对象
    this.setState({ userInputArray: updatedArray });
  }

  render() {
    const { userInputArray } = this.state;

    return (
      <div>
        {/* 表单中的输入元素 */}
        {userInputArray.map((inputObject, index) => (
          <div key={index}>
            <input
              type="text"
              name={index}
              value={inputObject.name || ''}
              onChange={this.handleInputChange}
            />
            {/* 其他表单元素 */}
          </div>
        ))}

        {/* 其他展示用户输入的方式 */}
      </div>
    );
  }
}

export default FormComponent;