我想在我的表單中動態添加多個人。就像我有第 1 個人的用戶名和電子郵件一樣，當我單擊添加個人時，它應該在同一頁面上為第 2 個人創建相同的字段。當我單擊提交按鈕時，它應該給我所有人的對象。應用程序.jsimport './App.css';import React, { Component } from 'react'import PropTypes from 'prop-types'export default class App extends Component {  state = {    fields:[]  };  addPerson() {    this.setState({fields:[...this.state.fields, ""]})  };  handleChange(e, index) {    this.state.fields[index] = e.target.value;     this.setState({fields: this.state.fields});  }  handleSubmit(e) {    console.log(this.state,"$$")  }  render() {    return (      <div className="App">      <header className="App-header">      <div>            <h1>The Form</h1>            {                this.state.fields.map((field, index) => {                  return(                    <div key={index}>                        <input onChange={(e)=>this.handleChange(e, index)} value={field}/>                    </div>                )              }              )            }            <button onClick={(e) => this.addPerson(e)}>Add Person</button>            <button onClick={(e) => this.handleSubmit(e)}>Submit</button>        </div>      </header>    </div>    )  }}我希望我的狀態是這樣的...... state = {    fields:[      {        id: 1,        name: 'Max',        email: '[email protected]'      }    ]  };