onsubmit ハンドラー内でレンダリングが行われる場合

Question

私は反応するのが初めてで、学習中に制御コンポーネントと制御されていないコンポーネントを理解するためにコードをいくつか試し、usestate と useref を使用しました。初めてデータ名にjohn、年齢:40を付けて送信をクリックしました。送信中にステータスを変更したため、名前が「prakash」、年齢が40と表示されました。その後、年齢のみを60に変更して送信をクリックしましたが、変化しませんでした。年齢は、送信中に状態を変更したため、レンダリングして年齢を 60 に変更する必要があるのではないかと考えています。なぜ年齢が変わらないのか説明できますか？

ああああ

Answer 1

年齢入力値を変更しても、表示される年齢値が更新されない理由は、useRef フックを使用して年齢入力フィールドの値にアクセスしているためです。 これにより、再起動がトリガーされません。 -値が変更されたときにレンダリングします。

コードでは、フォームの送信時に名前のステータスは更新しますが、年齢のステータスは更新しません。 age.current.value を使用して年齢値にアクセスすると、コンポーネントの状態を使用せずに、年齢入力フィールドの現在の値に直接アクセスすることになります。 age.current.value の値はコンポーネントの状態の一部ではないため、値を変更しても再レンダリングはトリガーされません。

name のステータスを設定した後、handelsubmit 関数で年齢のステータスを更新できます。

const [名前, setName] = useState("");
const [年齢, setAge] = useState("");
const ageRef = useRef();

const handleSubmit = (e) => {
  e.preventDefault();
  setName("プラカシュ");
  setAge(ageRef.current.value);
};

戻る （
  

    名前: {名前}
     setName(e.target.value)} />
    年齢: {年齢}
    
    ＃＃＃提出する＃＃＃
  
);