確認できました。projectStatusTab stateがまだないので追加し、Tabs を value / onValueChange で制御します。
selectedProjectId の定義場所を確認します:
全体像が把握できました。projectStatusTab stateを追加し、タブ切り替え時に該当ステータスの先頭プロジェクトを自動選択するロジックを実装します。
Step 1: projectStatusTab state を追加
Step 2: Tabs を value / onValueChange で制御し、切替時に先頭プロジェクトを自動選択
Step 3: handleRegisterProject でタブを registered に切り替えてその先頭プロジェクトを選択
projectStatusTab stateを追加し、タブ切り替え時に onValueChange でそのタブの先頭プロジェクトを自動選択・selectedTrialId をリセットするようにしました。「登録」ボタン押下後は登録済みタブに自動移動し、登録したプロジェクトが選択された状態になります。別のタブに移動すると前のタブのプロジェクトの選択はリセットされるため、試験・工程が混在して表示されることはなくなります。
useEffect で初期化とタブ切り替え時に自動選択するロジックを追加します。
Step 1: タブ切り替え時に試験も自動選択するようonValueChangeを修正
Step 2: 初期ロード時に仮登録タブの最初のプロジェクトと試験を自動選択するuseEffectを追加
useEffectでの初期選択ロジックはデータ定義後に追加する必要があるので、trialsとprocessesの定義後に追加します:
Step 3: handleRegisterProjectでも試験の自動選択を追加
3点修正しました。(1) 初期ロード時にuseEffectで仮登録タブの最初のプロジェクトと試験を自動選択、(2) タブ切り替え時のonValueChangeで該当ステータスの最初のプロジェクトと試験を自動選択、(3) プロジェクト登録時にも登録済みタブの最初のプロジェクトと試験を自動選択するようにしました。これにより各タブで常に最初のプロジェクト・試験・工程が表示されます。
You can send messages while the preview loads