useStateパラメータ値

const [count, setCount] = useState(0)

const click1 = () => {
  setCount(count+ 1);
  setCount(count+ 1);
  console.dir(count);
}

const click2 = () => {
  setCount(count=> count+ 1);
  setCount(count=> count+ 1);
  console.dir(count);
}

setCountでは、値を変更して値を保存する方法が2つあります.
click 1の場合、count値をロードして保存します.変更した値はすぐには保存されません.
setCount(count+ 1); -> (count=1:保存待ち|現在値:count=0)
setCount(count+ 1); -> (count=1:保存待ち|現在値:count=0)
console.dir(count); -> count=0なので0を出力
出力後、関数実行終了後にcount値をリフレッシュ

そのままプリントアウト
逆に、矢印関数を挿入し、countの値を変更します.
setCount(count=> count+ 1); -> (count=1:保存待ち|現在値:count=0)
setCount(count=> count+ 1); -> (count=2:保存待ち|現在値:count=1)
console.dir(count);
出力後、関数実行終了後にcount値をリフレッシュ

これで2つの変数の設定方法に違いがあります
では、なぜ2つの方法は関数が終わった後に変数を保存するのでしょうか.
useStateが変数を変更する方法は非同期であるためです.
したがって、1つの関数で値の変更とロードを同時に使用することは推奨されません.

複数のパラメータ値の同時処理

複数のパラメータ値を処理するときにすべてのステータスを作成するよりも、オブジェクトをグループ化することをお勧めします.
たとえば、複数の入力に値をロードする場合は、

import React, {useState} from "react";

function InputSample() {
    const [inputs, setInputs] = useState({
        realname: '',
        nickname: ''
    });

    // 비구조화 할당을 이용해 데이터 추출
    const { realname, nickname } = inputs;

    const onChange = (e) => {

        // 이벤트 타겟에서 name과 value 추출
        const {value, name} = e.target;
        setInputs({
            // 불변성을 지키지 위해 spread 문법 이용
            ...inputs,
            [name] : value
        })
    };

    const onReset = () => {
        setInputs({
            realname: '',
            nickname: '',
        })
    };

    return (
        <div>
            <input name = "realname" placeholder = "이름" onChange={onChange} value = {realname}/>
            <input name = "nickname" placeholder = "닉네임" onChange = {onChange} value = {nickname}/>
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값: </b>
                {realname} ({nickname})
            </div>
        </div>
    );
}

export default InputSample;

...入力しない場合は、

setInputs({
	// 불변성을 지키지 위해 spread 문법 이용
	//...inputs,
	[name] : value
})

inputs値の浅い値をオブジェクトにコピーしないと、既存の値は保存されません.
入力...inputsデータ表示realname : value , nickname : value

input = { 
    realname : value , 
    nickname : value ,
    [name] : value
}

このように動作します.

input = { 
    [name] : value
}

これにより、既存の値は新しいオブジェクトで上書きされ、消えます.

もともとこんな値段だったはずです.