我目前正在嘗試使用 React 建立一個 Web 應用程序，提示使用者使用表單輸入一些內容。提交時，程式碼會建立一個物件“teammate”，然後推送到陣列“Team”。然後，我希望使用地圖方法循環遍歷我的數組，並將所有隊友物件顯示在每張卡片上。我不明白為什麼 App.js 的第 94 行沒有顯示我的陣列。請幫助任何建議，我們將不勝感激。

import logo from './Nemo.jpg';
import './App.css';
import { useState, useEffect } from 'react';
import './Card.css'

const App = () =>  {

  const NavBar = () => {
    return(
        <>
        <nav>
            <div style={{display: 'inline-flex'}}>
            <a href='index.js'>
            <img src={logo} width="80" height="80" viewBox="0 0 40 40" fill="none"></img>
            </a>
            <h1>Metric Dashboard</h1>
            </div>
        </nav>
        <br></br>

        </>
    )
  }



const MyForm = () =>{

    //Define Team array
    const [Team,setTeam]  = useState([]);

    //Function used for submit
    const handleSubmit = (event) => {
        event.preventDefault();

        let teammate = {
            myId: Math.floor(Math.random() * 10000),
            myUserName: document.getElementById('user').value,
            mySweepName: document.getElementById('SweepName').value,
            mySweepDate: document.getElementById('SweepDate').value,
            mySweepCases: document.getElementById('SweepCases').value,
            update: function() {
                this.mySweepDate = document.getElementById('SweepDate').value;
                this.mySweepCases = document.getElementById('SweepCases').value;
                this.mySweepName = document.getElementById('SweepName').value;
            }

            

        }
        console.log(teammate)
        if(Team.length === 0 ){ //If array is empty
            console.log("This array is empty")
            Team.push(teammate)
            console.log("Array is no longer empty")
        }

        //If not empty checks if the user submits with the same sweep name. If same, update and not push to array
        else if(Team.length !== 0 ){ 
            console.log("This Array is not empty")
            for(let i = 0; i < Team.length; i++){
                if(Team[i].mySweepName === document.getElementById('SweepName') && Team[i].myUserName === document.getElementById('user').value){
                    console.log("Teammate Updated")
                    document.forms[0].reset()
                    return(Team[i].update())
                }
            }
            //If not empty and no duplicates, push object to array
            Team.push(teammate)
        }
        console.log(Team)
        document.forms[0].reset()
}
    return(
        <>
        <form> SWEEP
            <br/>
                Name: 
                <select id="user">
                <option value="default">Select your name</option>
                    <option value="John Doe">John Doe</option>
                    <option value="Plain Jane">Plain Jane</option>
                    <option value="Mike Jones">Mike Jones</option>
                </select><br/>
                Name of Sweep:
                <input type='name'placeholder='Name of Sweep' id="SweepName" /><br/>
                Date:
                <input type='date' placeholder='Data' id="SweepDate"/><br/>
                Cases: 
                <input type="number" min="0" placeholder='# of cases' id="SweepCases"/>
            <br/>
            <input className='mySubmit' type="submit" onClick= {handleSubmit}/><br/><br/>
        </form>
        <div className='cardContainer'>
                {Team.map((item) =>(
                    <ul key={item.myId} className='sweepCard'>
                        <li>{item.myUserName}</li>
                        <li>Sweep Name: {item.mySweepName}</li>
                        <li>Sweep Date: {item.mySweepDate}</li>
                        <li>Sweep Cases: {item.mySweepCases}</li>
                    </ul>
                ))}
            </div>
        </>

    )
}

  return (
    <div className='App'>
        <div className='NavBar_Component'>
            <NavBar/>
        </div>
        <div className='Display_comps'>
            <div className='tryAgain'>
                 <MyForm/>
            </div>
        </div>
    </div>
    
  );
}

export default App;

在偵錯中，我發現我的運行到達了 App.js 中的第 94 行，但從未開始 Team.map 迭代。