Mengapa kaedah peta tidak menunjukkan kandungan div saya?

Question

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.

Answer 1

Masalahnya ialah dalam cara anda mengemas kini tatasusunan status Pasukan. Dalam React, anda tidak seharusnya mengubah suai terus pembolehubah keadaan (Pasukan dalam kes ini) menggunakan kaedah seperti push, kerana ia tidak akan mencetuskan pemaparan semula komponen dan React tidak akan mengenali kemas kini keadaan.

Untuk menyelesaikan masalah ini, anda harus menggunakan fungsi setTeam yang disediakan oleh useState hook untuk mengemas kini tatasusunan keadaan dengan betul. Fungsi setTeam mengemas kini keadaan dan mencetuskan pemaparan semula komponen untuk memastikan data baharu dipaparkan.

Fungsi serah pemegang:

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

  const newTeammate = {
    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,
  };

  if (Team.length === 0) {
    console.log('This array is empty');
    setTeam([newTeammate]); // 使用setTeam来更新状态数组
    console.log('Array is no longer empty');
  } else {
    console.log('This Array is not empty');
    const duplicateIndex = Team.findIndex(
      (item) =>
        item.mySweepName === newTeammate.mySweepName &&
        item.myUserName === newTeammate.myUserName
    );

    if (duplicateIndex !== -1) {
      console.log('Teammate Updated');
      const updatedTeam = [...Team];
      updatedTeam[duplicateIndex] = newTeammate;
      setTeam(updatedTeam);
    } else {
      //如果不为空且没有重复项，将对象推入数组
      setTeam((prevTeam) => [...prevTeam, newTeammate]);
    }
  }
  console.log(Team);
  document.forms[0].reset();
};

Dengan menggunakan fungsi setTeam dan menghantar keadaan dikemas kini sebagai tatasusunan baharu (atau salinan diubah suai keadaan sebelumnya), anda memastikan bahawa data yang betul dipaparkan apabila komponen itu dipaparkan semula dan lelaran Team.map akan memaparkan kemas kini elemen tatasusunan.