1 ページに 2 つのコンポーネントをインポートすると、トースト メッセージが 2 回表示される

Question

この奇妙な問題に遭遇しました。これに遭遇したのはこれが初めてです。 Redux ツールキットを使用してアプリケーションの作成を処理するボタンを作成しました。 UI デザインによれば、ボタンは以下に示すようにページ上に 2 回表示される必要があります。強調表示されたボタンは同じコンポーネントです。

アプリを作成しようとすると、2 つのトースト メッセージが表示されます:

「アプリの作成」ボタンの 1 つを削除して、もう 1 つを保持し、アプリを作成しようとすると、予想どおりトースト メッセージのみが表示されることに気付きました。

1 つの機能を処理するために 2 つの別々のボタンを作成するのが理想的なベスト プラクティスですか?

これは「CreateAnApp」ボタンです:

リーリー

これは申し込みページです:

リーリー

そして私の appSlice:

リーリー

Answer 1

トースト メッセージ関数を [アプリケーションの作成] の useEffect フックから [アプリケーション] ページに移動することで、この問題を修正しました。今トイレで思いつきました（笑）。これについてはまだ完全には理解していないので詳しくは言えません。私たちは毎日学んでいます

「アプリケーションの作成」ボタンの useEffect フックを更新しました:

リーリー

更新されたアプリケーションページ:

リーリー