如何使用useState将用户输入对象添加到React中的数组

const [userInputs, setUserInputs] = useState([]);

const handleUserInput = (event) => {
  event.preventDefault(); // 阻止表单默认提交行为

  // 获取用户输入的值
  const userInput = {
    name: event.target.name.value,
    age: event.target.age.value,
    // 其他属性...
  };

  // 将用户输入的对象添加到数组中
  setUserInputs((prevInputs) => [...prevInputs, userInput]);

  // 清空输入框
  event.target.reset();
};

<form onSubmit={handleUserInput}>
  <input type="text" name="name" placeholder="姓名" />
  <input type="number" name="age" placeholder="年龄" />
  {/* 其他输入字段... */}
  <button type="submit">添加</button>
</form>

<ul>
  {userInputs.map((input, index) => (
    <li key={index}>
      姓名：{input.name}，年龄：{input.age}
    </li>
  ))}
</ul>