React)ステータス値の変更(複数の値を一度に変更)

useState

最初のレンダリングでは、反応はすべてのjsxコンポーネントを1回読み込みますが、読み込み後、データ(or value)の変更によって再レンダリングされることはありません.
Reactionの場合、再レンダリングしない限り、値が変更されたことを知らないため更新されません.では、stateの値を更新するためにReactionを再レンダリングするにはどうすればいいですか?

USStateという名前のhookを使う

プレイヤーの使用インタフェースに反映されたデータが流れている場合は、一般的な変数ではstateを変更できないため、stateが必要です.ただし、値を作成および変更できます.これらの値が変更されると、反応器はstateに入力された素子だけを再読み込みします.(他の構成部品は変更または再レンダリングされません)

stateをuseState hookで置き換えると(入力しようとする)、常に2つの値(values)が伴います.state: value itselfおよびsetState : value updating function(update whenever the State should change).
(stateは名前にかかわらず初期名にすぎません!)
最初の要素:JSXコードに表示されるstate値.例)<h2>{title}</h2>かっこにのみ書かれている場合、残りの部分は、リアクターがステータスの変化を知っているときに構成部品を再レンダリングし、jSXコードを再評価します.

1つの構成部品が複数のstateに関連している場合?

1.Multi-state approach

 const [enteredTitle,setEnteredTitle] = useState("");
 const [enteredAmount,setEnteredAmount] = useState("");
 const [enteredDate,setEnteredDate] = useState("");
 
 -------------------- state 사용힐때 -------------------------
  const titleChangeHandler = (event) => {
        setEnteredTitle(event.target.value);};
        
    const amountChangeHandler = (e)=> {
        setEnteredAmount(e.target.value);};
        
    const dateChangeHandler = (e)=> {
        setEnteredDate(e.target.value);};

=>state valueすべて個別に書き込む

複数のstate値

を一度に書き込む

const [userInput,setUserInput]= useState({
      enteredTitle:"",
      enteredAmount:"",
      enteredDate:"",
    });
    
-------------------- state 사용할때 -------------------------
 const titleChangeHandler = (e) => {
      setUserInput({...userInput, enteredTitle: e.target.value});
    };
    const amountChangeHandler = (e)=> {
      setUserInput({...userInput,enteredAmount: e.target.value,});
    };
    const dateChangeHandler = (e)=> {
       setUserInput({...userInput,enteredDate: e.target.value,});
    };

1番と2番は同じことを言う
2番のように使うときに注意したい点)複数のstateを同時に処理するので、1つのstate値を変更するときは、残りのstate値を失わないようにコピーして一緒に書く必要があります.つまり、以前の状態にすでに存在していた値をコピーし(スプレッドシート構文で元の値を書きます)、残りの変更した状態値を更新して上書きします.

3.2番より良い方法(Prestateで管理!)

より良い方法の理由:返事はstateの変更によってすぐに更新されません.理論的には、2つ目の方法を使用して大量のstate値を同時に更新すると、state値は以前の不正なstate値更新=>精度から低下する可能性があります.
したがって、第3の方法を使用すると、状態値の更新時に内部関数(presState)=>{})presStateを使用して、反応器にすべての状態更新計画を常に記憶させ、最新の状態で再び状態を更新することができる.したがって、これはより安全な方法であり、最新のstateで更新しながらstate値を変更することを再確認できます.この関数form((prevState)=>{})は、state値の更新時に以前のstate値の影響を受けた場合に使用できます.