問題タブ [react-lifecycle-hooks]

子/親で余分な状態を管理することなく、親コンポーネントで小道具が変更された後、子コンポーネントで関数を実行したいと考えています。

ChildComponent.js

componentWillReceiveProps で nextProps をコンソールしようとすると、小道具が変更された後でも毎回同じ結果が得られます。

componentDidMount() を使用して Arrow 関数でライフサイクルを使用できますか? クラスコンポーネントを機能コンポーネントに変換しようとしています。
以下の別のプロジェクトでコンテンツの多いブログを作成しました。このブログをメイン プロジェクトの blog.js ページに追加したいと考えています。

機能するオリジナルのコンテンツ満載のブログ。

ブログ.js

デフォルトのアプリをエクスポートします。

useEffect を追加したところ、状態が未定義になりました

以前に実行していたページを複製し、ブログを含めたいのですが、ここに入力した画像の説明を変換する際に問題があります

私は、ほとんどのゲームと同様に、ゲーム内のどこからでもトリガーできるさまざまなシナリオを持つゲームを作成しています。

グローバルな状態管理ツールとして非常に使いやすい Jotai を使用することにしました。Jotai 原子は少し似たような振る舞いをしsetState、useContext結合します。

リードアップ

プレイヤーのエネルギーをアトムに蓄えています。エネルギーが に達する0とuseEffect、<EnergyLevel />コンポーネント内の a が「グローバル イベント状態」原子の変化を引き起こします。その変更は親コンポーネントに反映され、グローバル イベント状態値が「ゲーム終了」値である場合、<Game />条件付きでコンポーネントがレンダリングされます。<EndGame />

ユーザーは「やり直す」をクリックすると、グローバル イベント状態値とグローバル「アクティブ スクリーン」値がリセットされ、メイン メニューのレンダリングがトリガーされます。この時点で、グローバル イベント状態は明示的に に設定されていNONEます。

ユーザーが "Load Last Game" をクリックすると ("loading state" アトムが設定されます)、親<Game />コンポーネントが再レンダリングされ、useEffect条件付きで、データベースから最後に保存されたゲームを取得して設定する、派生した書き込み専用アトムが呼び出されます。他のすべてのアトムをそれらの値にします。また、新しくロードされたゲームのデフォルトにアトムを追跡するグローバル状態をリセットします。

不具合

技術的には、この時点までは実際にはすべてが期待どおりにレンダリングされますが、1 つの追加コンポーネント: の読み込みが完了した後、コンポーネントが再度<EndGame />レンダリングされます。<Game />

これをさらに (そして多くの console.logs を使用して) 調べたところ、別のレンダリングがの予想される最終レンダリング (useEffect の後) の後にトリガーされ、<Game />その予期しないフェーズ中に、明示的に に設定されたグローバル イベント アトム値が であることがNONEわかりました。どういうわけか古いイベント値にリセットします。

質問

上記の「バグ」セクションの 2 番目の段落で参照したように、追加のレンダリング サイクルの原因は何ですか? そして、eventTriggeredOfTypeこの予期しないレンダリング中にアトム値が変化するのはなぜですか?

コード

この奇妙な動作を再現可能なコードは、ここでサンドボックス化されています。ロードしたら、指示に従ってください。

意図したロジックを示すためのスニペットを次に示します。

反応するネイティブアプリがあります。画面へのナビゲーションを検出したいので、特定の画面に移動したときに更新機能をトリガーします。私は componentDidMount を持っていますが、初めてナビゲートするときにのみ機能します... AppState も見ましたが、画面間のナビゲーションを監視しません。どうすればよいですか?

ありがとう

componentWillMount() は廃止されたため、 componentDidMount() で HTTP リクエストを作成し、レスポンスに従って状態を更新しています。componentDidMount() は render() メソッドの後に実行されますが、componentDidMount で this.setState() を使用すると、render メソッドを再度呼び出す必要があります。そのため、状態のエラー プロパティに条件付きで依存するモーダル コンポーネントは、リクエストにエラーがある場合に再レンダリングする必要があります。しかし、状態が変化していないため、Modal コンポーネントがレンダリングされません。誰か助けてくれませんか??