https://primefaces.org/primereact/showcase/#/autocomplete

コンポーネントがロードされるとすぐに、提案ドロップダウンをロードしようとしていますcomponentDidMount. はのデータでsuggestionsList更新されていますが、候補ドロップダウンは表示されません。objcomponentDidMount

簡単に言えば、入力がフォーカスされ、入力テキストがない場合は常に、提案ドロップダウンが表示されます。

abcCmp.jsx

**最初にコードを投稿してから、後で何が問題なのかを説明します。

説明：

1. ParentComponent にはその折りたたみがあり、その折りたたみでは、this.state.id (異なる場合があります) を使用して ID を渡しています。
2. クリック時のそのボタンは、折りたたみを切り替え、その小道具で ChildComponent を表示しています。

シナリオ：

1. ParentComponent は「カード」で、ID が異なるものが複数あります。
2. ボタンをクリックするたびに、ParentComponent からの新しい ID で状態が更新され、小道具として ChildComponent に渡されます。

私が直面している問題:

別の ParentComponents を切り替えると、ChildComponent の componentDidUpdate の呼び出しが停止し、ID が更新されません。その ID で取得する必要がある情報が正しくないことを意味します。

また、ChildComponent の render() が呼び出されていないため、一度レンダリングしたため、再度レンダリングすることはないようです。

それが問題です。 ChildComponent に渡された小道具が変更されるたびに componentDidUpdate を呼び出すべきではありませんか? 別の ParentComponent を切り替えるたびに、渡される小道具を変更しています。

前もってありがとう、私は自分自身を明確にしたことを願っています

React アプリケーションでライフサイクル フックがどのように機能するか理解できません。次のように、render メソッドでいくつかの props を Pagination コンポーネントに渡すアプリケーションがあります。

Pagination コンストラクターで、prop 値を出力します。

0が出力されます。

当然のことながら、まだブログの投稿を取得していません。したがって、componentDidMount では、次のようにブログ投稿をフェッチします。

これで、ブログの投稿が読み込まれましたが、ページネーション コンポーネントは更新されません (ブログ自体は更新されたように見えますが)。

ここで、React ライフサイクル フックがどのように機能するかについてのガイダンスが必要です。状態が変化した後、render メソッドは再実行されませんか? Pagination コンポーネントが再レンダリングされ、今回は totalRecords prop が 3 (または 0 より大きい数値) を出力することを期待しています。再レンダリングしても、コンストラクターは 1 回しか実行されませんか?

したがって、再レンダリングをトリガーする必要がある場合に備えて、componentShouldUpdate()メソッドでこれを実行しました。

確かに、this.state.blogPosts.lengthショー0とnextState.blogPosts.lengthショー3。したがって、それらは異なります.3つのブログ投稿で状態が更新されることを期待しています. 長さが異なる場合は true を返すので、コンポーネントを更新する必要があります。それは再レンダリングを意味しませんか？

いずれにせよ、totalRecords は 0 のままです。Pag​​ination コンポーネントで時間間隔を設定することもできます。

ブログ投稿が取得されて状態に追加されてから 5 秒ごとに 0... が出力されます。

Pagination コンポーネントが totalRecords の新しい値で更新されないのはなぜですか?