Saya sedang cuba mencipta aplikasi web menggunakan React yang menggesa pengguna memasukkan sesuatu menggunakan borang. Semasa penyerahan, kod mencipta objek "rakan sepasukan" dan kemudian menolaknya ke tatasusunan "Pasukan". Saya kemudiannya mahu menggunakan kaedah peta untuk mengulang tatasusunan saya dan memaparkan semua objek rakan sepasukan pada setiap kad. Saya tidak faham mengapa baris 94 App.js tidak menunjukkan tatasusunan saya. Sila bantu sebarang cadangan akan sangat dihargai.

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;

Semasa menyahpepijat, saya mendapati bahawa larian saya mencapai baris 94 dalam App.js tetapi tidak pernah memulakan lelaran Team.map.