問題タブ [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.
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 と組み合わせて使用しながら、レデューサーをそのまま使用しています...
コンポーネントが再構築されるたびに実行されます。
javascript - useSelector による React ネイティブ useCallback の状態変更
useSelector
で見つけた、必要なテーマ タイプのステータスを取得します settings.item.colorScheme
。
選択した言語をクリックしてBottomSheet
変更できる があります。この変更により、 のステータスredux
も変更settings
されuseSelector
ます。
問題は、内部の状態がuseCallback
変更されないことです。少なくとも、bottomSheet
メニューを閉じてから再度開いたときにのみ変更されます。
useCallback
内部で定義されているものの中で、更新されたステータスを確認するにはどうすればよいですか?
に引数として渡そうとしましたuseCallback
が、うまくいきません。
コード:
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 です。
フォーマットについては申し訳ありませんが、いくつかの問題が発生しています。私が問題になるアイデアはありますか?
ありがとうございました。
javascript - useEffect、useCallback、setTimeout を連携させるのに問題がある
幅に基づいてスライダーのカスタム スクロール動作を実装しようとしています。スライダー内の現在のページと合計ページを追跡するために、useState を使用しています。これは私がコンパイルしようとしたコードですが、予期しない動作がいくつかあります。
ここでの問題は、currentPage が UI に表示されているときに、else が handleScroll 関数内で実行されると 1 にリセットされることです。これはまったく問題ありませんが、取得時に 2 に戻るのではなく、前の値に戻ります。次のページへ。また、isTimeoutLocked を useEffect の依存関係として追加したため、setTimeout はより頻繁に実行されますが、正しい値を取得するための依存関係としてのみ使用したいので、変更のたびに useEffect が実行されるわけではありません。isTimeoutLocked の目的は、現在の日付を変更してコンテナ内のコンテンツを変更したときに、多数のタイムアウトが登録されないようにすることです。