我目前正在尝试使用 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(
        <>
        
        



        
    )
  }



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(
        <>
        
 SWEEP
            

                Name: 
                
                Select your name
                    John Doe
                    Plain Jane
                    Mike Jones
                

                Name of Sweep:
                

                Date:
                

                Cases: 
                
            

            


        
        

                {Team.map((item) =>(
                    

                        
{item.myUserName}
                        
Sweep Name: {item.mySweepName}
                        
Sweep Date: {item.mySweepDate}
                        
Sweep Cases: {item.mySweepCases}
                    
                ))}
            
        

    )
}

  return (
    

        

            
        
        

            

                 
            
        
    
    
  );
}

export default App;

在调试中，我发现我的运行到达了 App.js 中的第 94 行，但从未开始 Team.map 迭代。