Reactフック:useEffectsの依存関係としてオブジェクトを処理する

3
Stallion V 2019-10-16 22:43.

更新:ユースケース1では、useEffectの外部でsearch.valueを抽出し、それを依存関係として使用すると、はい。

しかし、私は以下の更新されたユースケースを持っています

ユースケース2:searchHitsオブジェクトをサーバーに渡したい。サーバーは、それに応じて更新された値でそれを私に返します。searchHitsオブジェクトを使用しようとすると、無限ループが発生します

state: {
    visible: true,
    loading: false,
    search: {
        value: “”,
        searchHits: {....}, 
        highlight: false,
    }
}

let val = search.value
let hits = search.searchHits
useEffect( () => {

    axios.post(`/search=${state.search.value}`, {hits: hits}).then( resp => {
        …do something or ..do nothing
        state.setState( prevState => {
            return {
                …prevState,
                search: {... prevState.search, hits: resp.hit}
            }
        })
    })
}, [val, hits])

ユースケース1:文字列を検索し、結果が得られたら強調表示したい

例えば

state: {
    visible: true,
    loading: false,
    search: {
        value: “”,
        highlight: false,
    }
}

useEffect( () => {

    axios.get(`/search=${state.search.value}`).then( resp => {
        …do something or ..do nothing
        state.setState( prevState => {
            return {
                …prevState,
                search: {... prevState.search, highlight: true}
            }
        })
    })
}, [state.search])

useEffectでは、を使用してAPI呼び出しを行いsearch.valueます。eslintは、に依存していると文句を言いますが、をstate.search認識しませんstate.search.value。合格しstate.search.valueても文句を言うstate.search

これで、state.search依存関係として渡すと、API呼び出しの後highlightsに検索内のフラグが更新されるため、無限ループになります。

これにより、別の状態更新と再帰ループがトリガーされます。

これを回避する1つの方法は、ネストされたオブジェクトを状態にしないか、ハイライトフラグを検索外に移動することですが、私が持っている完全な依存関係を与えるために、そのルートに進まないようにしています。むしろ、検索と呼ばれる状態のオブジェクトをそのままにしておきたいと思います。これにもっとうまくアプローチする方法はありますか?上記のように状態オブジェクトを保持したい場合、無限ループを処理するにはどうすればよいですか?

1 answers

4
Karthik R 2019-10-17 09:08.

ただのeslintスタッフのバグかもしれません。あなたは言うことによっていくつかのコードを撤回し、//do something彼のコードを隠しました。検索オブジェクトとは何の関係もありませんか?

また、の前に変数を抽出してみてくださいuseEffect()

const searchValue = state.search.value; useEffect(()=>{// axios call here},[searchValue])

検索値がオブジェクトの場合、reactは浅い比較を行うため、望ましい結果が得られない可能性があります。オブジェクトの依存関係のセットで再レンダリングすることは理想的ではありません。変数を抽出します。

ReactはuseEffectで指定された依存関係の浅い比較を行います

例えば。、

const {searchParam1, searchParam2} = search.value;
useEffect(() => {
//logic goes here
}, [searchParam1, searchParam2]);

さらに、eslint-plugin-react-hooksの開発依存関係を追加しフックに関する一般的なエラーを特定できます。

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

あなたが危険なほど過熱しているかどうかを知る方法

あなたが危険なほど過熱しているかどうかを知る方法

カリフォルニア州カレキシコでは、6月上旬に気温が約115度に達すると、人々はダウンタウンを歩きます。私たちは夏にたった2週間で、熱波はすでに米国を灼熱しています。

庵野秀明がシン・ウルトラマンのモーションキャプチャ俳優として最高の人生を送るのを見る

庵野秀明がシン・ウルトラマンのモーションキャプチャ俳優として最高の人生を送るのを見る

庵野秀明は、ついに新世紀エヴァンゲリオンを締めくくった後、自分のやりたいことを何でもしているようだ(少なくとも今のところ)。彼はウルトラマン映画を作るようになり、現在は仮面ライダー1号を監督しており、生涯にわたる2つのスーパーヒーローの執着のために新しい章を作成することを彼に任せています。

今週のおもちゃのニュースは間違いなくあなたのウーキーを曲げました

今週のおもちゃのニュースは間違いなくあなたのウーキーを曲げました

io9の最新かつ最高のオタク玩具ニュースの定期的なまとめであるToyAisleへようこそ。今週は、オビ=ワンの水曜日をさらに2つのハズブロフィギュアで締めくくります。Super7はスプリングフィールドに戻り、さらに多くのシンプソンズアルティメットを目指します。ダースベイダーをバップする勇気はありますか?見てみな!プレイメイトは、初期の頃からのシンプソンズのフィギュアの信じられないほど豊富なラインで素晴らしい仕事をしましたが、Super7のシンプソンズアルティメットほど詳細でアクセサリー化されていませんでした!数字—彼らがもっと早く彼らを追い出し始めてくれることを願っています。

ディズニーの不条理な$5,000スターウォーズカクテルの実際の内容は次のとおりです

ディズニーの不条理な$5,000スターウォーズカクテルの実際の内容は次のとおりです

その悪名高い5,000ドルのスターウォーズをテーマにした飲み物に何が入っているのか知りたいと思っているなら、それはもはや完全な謎ではありません。ハイパースペースラウンジのディズニーウィッシュクルーズ船で独占的に入手できるカイバークリスタルは、豪華に提示されたテーマカクテルで、提供されるカムトノに付属しているはずですが、残念ながらそうではありません。銀河系で最も高価なトップシェルフセレクション。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

Seguindo Todos os Protocolos (2022), de Fábio Leal

Seguindo Todos os Protocolos (2022), de Fábio Leal

Chico quer transar. Até aí, tudo bem.

多元宇宙—Junø

多元宇宙—Junø

チェーン間アカウントがJunoに登場します。異なるブロックチェーン間でスマートコントラクトの構成可能性と真の相互運用性を提供します。

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

1.ドラマを見た後、起業する考えはありますか?あなたのビジネスはボトルネックに遭遇しましたか?方向性がなくてわからない場合は、ドラマを追いかけて行くことを心からお勧めします。(?)ブラフではなく、最も完璧なビジネス例を隠すドラマがあります。2.ブレイキング・バッドとその弁護士ドラマ「ブレイキング・バッド」を見た友人たちは、演劇の中で、穏やかな表情で、弁護士のソウル・グッドマンに深く感銘を受けなければなりません。口を開けて、感覚の弱い傭兵の性格を持っています。道徳の面で、サル・グッドマンは無意識のうちに劇に欠かせない役割を果たし、彼自身のシリーズ「絶望的な弁護士」(ベター・コール・ソール)を生み出しました。ウェントウのテキストとビデオは、劇中のソウル・グッドマンのテレビコマーシャルです。製品(サービス)、競争戦略、市場ポジショニング、ブランド名、ターゲット顧客グループ、コミュニケーション軸から広告まで、サル・グッドマンの役割のビジネス設定は、「最低」と見なすことができる超超超超超超完全です。ブランドコミュニケーションのコスト」「変化」のモデル。なぜ?私の分析をご覧ください。3.ソウル・グッドマンの「事業戦略」1.基本情報ブランド名:Saul Goodman製品:法律相談サービス対象顧客:麻薬中毒、飲酒運転、事故など。法律知識の欠如は、一般的に公立弁護士にしか余裕がなく、真面目な弁護士も「特別な法律を持つ消費者」を避けます。恐れてはいけない「​​ニーズ」。コミュニケーションの主軸:この国のすべての男性、女性、子供は有罪判決を受けるまで無実だと思います。地域:アルバカーキ市スローガン:Thrallに電話したほうがいいです!(ベター・コール・ソール)広告:2つの可能性のある犯罪状況をシミュレートします+サウルの主張+サウルのスローガン2をより適切に呼び出します。

メインネットガイド— Arbitrum Odyssey Week 2

メインネットガイド— Arbitrum Odyssey Week 2

最新のアップデートを受け取るために私たちに従ってください。ニュースレター:https://www。

Language