現在、React を使用して、ユーザーにフォームを使用してコンテンツを入力するように求める Web アプリケーションを作成しようとしています。送信時に、コードはオブジェクト「teammate」を作成し、それを配列「Team」にプッシュします。次に、map メソッドを使用して配列をループし、各カード上のすべてのチームメイト オブジェクトを表示したいと思います。 App.js の 94 行目に配列が表示されない理由がわかりません。ご提案をいただければ幸いです。
リーリーデバッグ中に、実行が App.js の 94 行目に達したが、Team.map の反復が開始されていないことに気付きました。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
問題は、チーム ステータス配列を更新する方法にあります。 React では、プッシュなどのメソッドを使用して状態変数 (この場合はチーム) を直接変更しないでください。これは、コンポーネントの再レンダリングがトリガーされず、React が状態の更新を認識しないためです。
この問題を解決するには、useState フックによって提供される setTeam 関数を使用して、状態配列を正しく更新する必要があります。 setTeam 関数は状態を更新し、コンポーネントの再レンダリングをトリガーして、新しいデータが表示されるようにします。
handleSubmit 関数:
リーリーsetTeam 関数を使用し、更新された状態を新しい配列 (または以前の状態の変更されたコピー) として渡すことで、コンポーネントが再レンダリングされるときに正しいデータが表示されるようになり、Team.map の反復により更新された配列要素を表示します。