我目前正在尝试使用 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( <> 在调试中，我发现我的运行到达了 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迭代将显示更新后的数组元素。