Why doesn't the map method show my div content?-PHP Chinese Network Q&A

I'm currently trying to create a web application using React that prompts the user to enter some content using a form. On submission, the code creates an object "teammate" and then pushes it to the array "Team". I then want to use the map method to loop through my array and display all teammate objects on each card. I don't understand why line 94 of App.js doesn't show my array. Please help any suggestions will be greatly appreciated.

import logo from './Nemo.jpg'; import './App.css'; import { useState, useEffect } from 'react'; import './Card.css' const App = () => { const NavBar = () => { return( <>      Metric Dashboard
 
 
 

  ) } 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: 
 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;

While debugging, I discovered that my run reached line 94 in App.js but never started the Team.map iteration.

reply all (1)

P粉6511093972023-09-17 13:28:08 1 floor

The problem lies in the way you update the Team status array. In React, you should not directly modify state variables (Team in this case) using methods such as push, because it will not trigger a re-rendering of the component, and React will not recognize state updates.

To solve this problem, you should use the setTeam function provided by the useState hook to correctly update the state array. The setTeam function updates the state and triggers a re-rendering of the component to ensure that new data is displayed.

handleSubmit function:

By using the setTeam function and passing the updated state as a new array (or a modified copy of the previous state), you ensure that the correct data is displayed when the component re-renders, and the Team.map iteration will display the updated array elements.