我目前正在嘗試使用 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 迭代。
問題出在你更新Team狀態陣列的方式。在React中，你不應該直接使用push等方法修改狀態變數（在這種情況下是Team），因為它不會觸發元件的重新渲染，React也不會辨識狀態更新。
要解決這個問題，你應該使用useState鉤子提供的setTeam函數來正確更新狀態數組。 setTeam函數會更新狀態並觸發元件的重新渲染，確保新資料被顯示出來。
handleSubmit函數：
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(); };透過使用setTeam函數並將更新後的狀態作為新數組（或先前狀態的修改副本）傳遞，你確保元件重新渲染時顯示正確的數據，Team.map迭代將顯示更新後的陣列元素。