useStateを使った状態管理
画面上に表示、コントロールの設定を行う際の方法に関してのメモとなります。
ページを作成しながらメモを残すようにしておりますが、内容に誤りがある場合もあるため、ご了承ください。
useState(フック)を使った変数の状態管理
useState(フック)
React関数コンポーネント内で状態を管理するための仕組み。
例として画面に表示させるデータの保持やコントロールに対してdisableなどの設定を行うときに使用する。
基本構文
const [state変数,更新用変数] = useState(初期値);
例）名前の情報を画面上で状態管理する場合
function App() {
const [name, setName] = useState('');
① name現在の入力状況を保持する「状態」
② setname 状態を更新する際に使用する関数
nameという変数に対して初期化を行い、setnameで新しい値を更新する。
丸括弧の''は初期値を表す。()と指定した場合はundefinedとして扱われる。
undefinedとして値を渡すとエラーとなる場合も存在するため、
なるべく初期値に関しては明確に定義をすること。
useStateは単純な情報を管理するだけでなくユーザー自身が作成したデータ型を
取り扱うことも可能。
データ型(配列形式ではない変数)を状態管理する場合
const [record, setRecord] = useState
イコール後ろのuseStateの後ろに
XXXXはデータ型の型名となる。
丸括弧部分にはデータ構造内の各初期値を設定するようにする。
複数レコードでは扱わない情報を管理する際に使用する。
下記の記述方法はエラーとなるため、注意。
・丸括弧内の値が''だけ指定している。
({'',''})といった形はエラーが発生する。
データ型(配列形式)を状態管理する場合
const [Tbl, setTbl] = useState
上記の記述に従って記述を行う。
画面上の大量のデータを取り扱う場合には上記のように管理を行う。
単体の変数の更新方法
変数と上書き用の関数の定義例
const [name, setName] = useState('');
上記のように定義されている場合は
setNameが関数となり、この関数を使用して変数nameの更新を行う。
更新する場合は下記のように記述する
setName('B');
上記を記述することで、変数nameの値を値Bとして上書きを行う。
NG例
変数nameに対して直接イコールで変数代入のような記述で更新すれば、良いのでは
ないかとなんとなくで考えがちだが、
name = 'B';
この記述の場合はエラーとなり、データが正しく処理できなくなる。
そのため、上書きをする際は関数経由で更新を行う。
データ型の変数に対して一部の変数のみ更新を行う場合
データ型にデータをセットする場合は下記のように記述する。
const [searchData, setData] = useState
setData({
...searchData,
strMajorClassId: '',
strMiddleClassId: '',
strSmallClassId: ''
});
関数setDataに対してXXXX型のデータ変数内のメンバー変数を書き換える処理。
…XXXXはデータ内の一部を上書きする際に記述する。
※YYYYは初期値を表す。
データ型変数の初期化
データ型変数を初期化する場合はuseStateで設定を行っている初期値自体を関数setDataに渡し、初期化する。
1か所だけソース内で取り扱っている場合は関数に渡す値は直書きで下記のように
記述して処理を行うのも手段としてはありだが、
何度も同じ処理を記述する場合は固定で別に設定用の設定を用意する。
決まった内容で毎度初期化を行うようである場合は下記のように下記の通りに記述する。
const initData: Data = {
strMajorClassId: '',
strMiddleClassId: '',
strSmallClassId: ''
};
初期化を行う際には下記のように記述して初期化を行う
setData(initData);
変数の定義部分で使用する場合は下記のように記述する。
const [searchData, setData] = useState(initData);
とりあえず、基礎的な部分かと思います。
今まで触ってきた言語でフックといった概念がなかったため、はじめ概念を理解するのに
時間がかかりました。追記あれば、また記事でまとめようかと思います。
次は画面の遷移方法に関しての記事がメインとなるかと思います。
今日のところはここまで。
