[解決済み] ルートパラメータを変更したときにコンポーネントが再マウントされない
2022-08-25 09:33:19
質問
react-routerを使用したreactアプリケーションに取り組んでいます。私は以下のようなURLを持つプロジェクトページを持っています。
myapplication.com/project/unique-project-id
プロジェクトコンポーネントがロードされると、componentDidMountイベントからそのプロジェクトに対するデータ要求をトリガーします。現在、2 つのプロジェクトを直接切り替えて、ID だけがこのように変更される問題に遭遇しています...
myapplication.com/project/982378632
myapplication.com/project/782387223
myapplication.com/project/198731289
componentDidMountが再びトリガーされないので、データはリフレッシュされません。データ要求をトリガーするために使用すべき別のライフサイクル イベント、またはこの問題に取り組むための別の戦略はありますか?
どのように解決するのですか。
リンク先が同じルートでparamが違うだけなら、再マウントではなく、新しいpropを受け取っていることになります。そこで
componentWillReceiveProps(newProps)
という関数で検索して
newProps.params.projectId
.
もしデータをロードしようとしているなら、ルーターがマッチを処理する前に、コンポーネントの静的メソッドを使ってデータをフェッチすることをお勧めします。この例をご覧ください。
Reactルーターメガデモ
. このようにすると、コンポーネントはデータを読み込み、ルートパラメータが変更されたときに自動的に更新されます。
componentWillReceiveProps
.
関連
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】React 17で動作するEnzymeアダプターはどれですか?
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み】Reactを使用したMapBoxのCSSが欠落している件
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] React」は定義される前に使用されていた
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み】コンポーネントの定義に表示名がない react/display-name
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] validateDOMNesting警告React
-
[解決済み] ESLintとTSLintの違い【クローズド】について
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法