私は初めてのフルスタック MERN アプリを構築しているのですが、React-multi-carousel パッケージについて「小さな」質問があります。

これは正面からのスクリーンショットです (選択した月 (選択した月と前月) のすべての日記を表示できる日記セクションです):

これは私のコードです: Diary-Container-Component から (ここで問題が発生し、カルーセルを使用しています)

リーリー

CSS のポイントと矢印の位置も変更しました (ただし、このカスタマイズを削除した後でも問題は引き続き発生します。そのため、エラーとは関係ないと思います)。

＃＃＃間違い： フィルターを 6 月から 5 月に変更するたびに (つまり、下のセクションで月が 3 月から 4 月に変わります)、約 10 項目があるにもかかわらず、4 月には点も矢印も表示されなくなります。

ページを更新して「5 月」を選択すると、月の間で必要なときに正常に動作します (6 月から 5 月への変更を除く)。

このコード スニペット

(diaries && (diaries.result.length < 4 ? false : true) を削除して true を使用すると、アプリは中断され、次の出力が得られます。無効な長さはロードできません。

カルーセルが正しく更新/レンダリングされていないように思えます。

したがって、6 月を選択すると、5 月の項目は下部に 1 つだけ表示されます (したがって、ドットと矢印は表示されません)。次に、5 月に変更すると、4 月が一番下になり、挿入されたデータセットは正しくなります (4 月の項目が表示されます)。ただし、点と矢印はまだ無効になっていますが、項目が 10 個あるため、有効にする必要があります。

useEffect フックと setState フックで再レンダリングを強制して正しく更新するために何度も再取得を試みましたが、カルーセルは更新されません。

ほぼすべてのコンポーネントにキー プロップを配置しました。しかし、バグはまだ存在します。

この問題の解決策を持っている人はいますか?おそらく、私のコードの構造が非常に不十分なので (私は初心者です)、実稼働環境ではこのエラーが認識されないのかもしれません。

＃＃＃助けてくれてありがとう。