実現したいこと
既に表示された子コンポーネントに対し、親画面(State)から再レンダリングを促したい
発生している問題・分からないこと
navigateにより、処理前→処理後が自画面遷移している為、Stateの変更を感知されないのかも知れませんが、解決策を見いだせないでいます。
該当のソースコード
import {useParams, useNavigate} from 'react-router-dom'; export function TestPage( props: {} ) { const navigate = useNavigate(); const (testId) = useParams(); //URLからの埋込パラメータ値取得 const data = [{id: 1, text: "aaa"},{id: 2, text: "bbb"}]; return ( <PageLayout> <div> <div>{/* 一覧 */} {(data ?? []).map((item, index) => ( <div onclick={ navigate(`/tests/${item.id}`); //←このnavigate先はこのコンポーネントそのもの }>{item.text}</div> ))} </div> <div>{/* ページ画面 */} {testId ? //←この値が変わってる(navigateを介して遷移)はずなのに表示された<TestPage>が破棄されない・・ <TestPage testId={Number(testId)}/> : <></> } </div> </div> </PageLayout> ) }
試したこと・調べたこと
上記の詳細・結果
一旦、useState()を使ってtestIdをこのコンポーネント内でState管理してみましたが、同様に再レンダリングされませんでした。(navigateで遷移してる為、当然カモしれませんが)
子コンポーネント<TestPage>を常に表示させ、testIdを必ず渡し、propsでState変化を感知できるかと思いましたが、再レンダリングできませんでした。(無反応-子コンポーネント内にも入って来てない様子)
補足
ソースはJSXベースで、読みづらかったらすみません。
0 コメント