지도 메소드에 내 div 콘텐츠가 표시되지 않는 이유는 무엇입니까?

Question

현재 양식을 사용하여 사용자에게 무언가를 입력하라는 메시지를 표시하는 React를 사용하여 웹 애플리케이션을 만들려고 합니다. 제출 시 코드는 "teammate" 개체를 생성한 다음 이를 "Team" 배열에 푸시합니다. 그런 다음 지도 방법을 사용하여 배열을 반복하고 각 카드의 모든 팀원 개체를 표시하려고 합니다. App.js의 94번째 줄에 내 배열이 표시되지 않는 이유를 이해할 수 없습니다. 어떤 제안이라도 도와주시면 대단히 감사하겠습니다.

으아아아

디버깅하는 동안 내 실행이 App.js에서 라인 94에 도달했지만 Team.map 반복을 시작하지 않은 것을 발견했습니다.

Answer 1

팀 상태 배열을 업데이트하는 방식에 문제가 있습니다. React에서는 푸시와 같은 메서드를 사용하여 상태 변수(이 경우 Team)를 직접 수정해서는 안 됩니다. 왜냐하면 구성 요소의 다시 렌더링을 트리거하지 않고 React가 상태 업데이트를 인식하지 못하기 때문입니다.

이 문제를 해결하려면 useState 후크에서 제공하는 setTeam 함수를 사용하여 상태 배열을 올바르게 업데이트해야 합니다. setTeam 함수는 상태를 업데이트하고 구성 요소의 다시 렌더링을 트리거하여 새 데이터가 표시되도록 합니다.

handleSubmit 기능:

으아악

setTeam 함수를 사용하고 업데이트된 상태를 새 배열(또는 이전 상태의 수정된 복사본)로 전달하면 구성 요소가 다시 렌더링될 때 올바른 데이터가 표시되고 Team.map 반복에서 업데이트된 배열이 표시됩니다. 강요.