問題タブ [usecallback]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
497 参照

reactjs - 重複データのレンダリングから React useEffect フックを停止する方法

私が使用useEffectし、内部で関数を呼び出すコンポーネントがありますfetchLatest()fetchLatest()は、その年にリリースされたすべての映画を取得するネットワーク リクエストを作成するアクションです。私は Redux を使用しており、私のストアにはstate.movies.latest、アプリを初めて起動するたびに、映画の最新の行が正確であり、データが重複していません。別のコンポーネントをレンダリングしてホーム コンポーネントに戻ると、fetchLatest重複したデータが取得されます。

私の問題は、レデューサーで次のようなものを返すためであることがわかりました...

payloadオブジェクト (動画) の配列です。

そこで、レデューサーを次のように変更しました...

現在は機能しており、重複したデータは得られませんが、これを正しく行っていない、または正しく理解していないことが懸念されます。useEffect を使用し、useEffect フックで fetchLatest 関数を使用し、それを依存関係として渡すと、fetchLatestレンダリング サイクルごとに新しいオブジェクトとして関数が再作成されることを理解しています。私はすでに映画の配列をストアに持っているので、複製されたデータlatestでストアに追加するたびに新しいオブジェクトを再レンダリングしたくありません。state.movies.latest私は少なくともこれがそれがしていることだと信じています。

依存関係が変更されない限り、useCallbackこの新しいオブジェクトが作成されないようにするために、を使用する必要があるかもしれないと判断しました。fetchLatest

だから、私が確信していないのは、更新されたレデューサーを現在持っているように使用し、そのコンポーネントを再構築するときに毎回新しいオブジェクトとして fetchLatest 関数を再作成するために無限ループが実行されないようにするために、 useCallback を使用できるということですか?

また、 useCallback を使用する前に試し、レデューサーを元のように使用したため、 useCallback が実際に何をするのか理解できない可能性があります。コンポーネントを最初にマウントしたときにすでにストアにある最新の映画のみが必要です

このコンポーネントの私のコードは次のようになります

私が最初にやろうとしたことは、この useCallback を追加し、useEffect で handleFetching を呼び出して、依存関係として渡すことでした。

ただし、 useCallback を useEffect と組み合わせて使用​​しながら、レデューサーをそのまま使用しています...

コンポーネントが再構築されるたびに実行されます。

0 投票する
0 に答える
374 参照

javascript - useSelector による React ネイティブ useCallback の状態変更

ここに画像の説明を入力

ここに画像の説明を入力

useSelectorで見つけた、必要なテーマ タイプのステータスを取得します settings.item.colorScheme

選択した言語をクリックしてBottomSheet変更できる があります。この変更により、 のステータスreduxも変更settingsされuseSelectorます。

問題は、内部の状態がuseCallback変更されないことです。少なくとも、bottomSheetメニューを閉じてから再度開いたときにのみ変更されます。

useCallback内部で定義されているものの中で、更新されたステータスを確認するにはどうすればよいですか?

に引数として渡そうとしましたuseCallbackが、うまくいきません。

コード:

0 投票する
1 に答える
108 参照

react-native - UseCallback 内のパラメーターを使用して関数にアクセスできません

Params を介して ID 番号を受け取るこのページ (画面) があります。この画面で、アクション (リデューサー) ファイルからアクション関数を呼び出そうとし、API 呼び出しを取得します。その呼び出しからの配列、問題は呼び出しにあったと思いますが、アクション関数の宣言の後にコンソールログを配置しましたが、出力されなかったので、その関数にアクセスしなかったと思うので、私は信じています問題は、Dispatch を介したその関数の呼び出しにあります。

ディスパッチ関数を呼び出す関数を呼び出す UseEfect 内にブレークポイントを配置しようとしましたが、エラーがどこにあるのかわかりません。これはコードです:

  • 画面(問題があると思われる場所):

    ;

    styles = StyleSheet.create({ image: { width: '100%', height: 300, }, サブタイトル: { fontSize: 16, textAlign: 'justify', marginVertical: 20, fontWeight:'normal', }, description: { fontSize: 16, textAlign: 'center', marginVertical: 20, fontWeight: 'bold',

  • これは私のアクションファイルです:

最後に、これは私の Redux Reducer です。

フォーマットについては申し訳ありませんが、いくつかの問題が発生しています。私が問題になるアイデアはありますか?

ありがとうございました。

0 投票する
1 に答える
58 参照

javascript - useEffect、useCallback、setTimeout を連携させるのに問題がある

幅に基づいてスライダーのカスタム スクロール動作を実装しようとしています。スライダー内の現在のページと合計ページを追跡するために、useState を使用しています。これは私がコンパイルしようとしたコードですが、予期しない動作がいくつかあります。

ここでの問題は、currentPage が UI に表示されているときに、else が handleScroll 関数内で実行されると 1 にリセットされることです。これはまったく問題ありませんが、取得時に 2 に戻るのではなく、前の値に戻ります。次のページへ。また、isTimeoutLocked を useEffect の依存関係として追加したため、setTimeout はより頻繁に実行されますが、正しい値を取得するための依存関係としてのみ使用したいので、変更のたびに useEffect が実行されるわけではありません。isTimeoutLocked の目的は、現在の日付を変更してコンテナ内のコンテンツを変更したときに、多数のタイムアウトが登録されないようにすることです。