如何将从表单输入创建的多个对象添加到react中的列表

import React, { useState } from 'react';

function FormAndList() {
  const [objects, setObjects] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();

    // 获取用户输入的值
    const name = event.target.elements.name.value;
    const age = event.target.elements.age.value;

    // 创建新的对象
    const newObject = { name, age };

    // 将新对象添加到数组中
    setObjects([...objects, newObject]);

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

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Age:
          <input type="number" name="age" />
        </label>
        <button type="submit">Add Object</button>
      </form>

      <ul>
        {objects.map((object, index) => (
          <li key={index}>
            Name: {object.name}, Age: {object.age}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FormAndList;