web-dev-qa-db-ja.com

依存関係を受け取るカスタムフックを作成する方法

いくつかの状態が変わったときにToGeを持っているカスタムフックをしています。

配列内の任意の状態を渡すことができるはずです。

import { useState, useEffect } from 'react'

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

export default useFlatListUpdate
 _

そしてそれはASとして使用されるべきです

const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */])
 _

しかし、それは私に次の警告を与えます

React Hook UseEffectには、その依存関係配列にスプレッド要素があります。これは、正しい依存関係を渡したかどうかを静的に検証できないことを意味します（React-Hooks/Entrutive-Deps）

私はそれがうまくいかない別の状況もあります

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, dependencies)

    return toggle
}
 _

これは私に警告を与えます

React Hook UseEffectは、配列リテラルではない依存関係リストに渡されました。これは、正しい依存関係を渡したかどうかを静的に検証できないことを意味します（React-Hooks/Entrutive-Deps）

ESLINTを無効にせずに、警告なしでこの作業を行うにはどうすればよいですか。

reactjsreact-nativeeslintreact-hooks
14
Vencovsky

最初の状況では、配列拡散を避けるように求められますので、依存リストを全体として渡す必要があります。

    useEffect(() => {
        setToggle(t => !t)
    }, dependencies)
 _

次の警告はあなたが依存関係を見逃していると言っています（setToggle）。

内部の効果依存関係でuseCallbackを使用してから、フックユーザーが提供する依存関係にあるUSEEffectでそれを折り返すことができます。

import { useCallback, useState, useEffect } from 'react'

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useCallback(() => { setToggle(t => !t) }, [setToggle])
    useEffect(toggleEffect, dependencies])

    return toggle
}

export default useFlatListUpdate
 _
0
long-lazuli

あなたは本当に質問に従ってカスタムフックを作成する必要がありますか。

useEffectを使用して、依存関係が変更されたかどうかを確認することができます。

const [toggle, setToggle] = useState(false);
useEffect(() =>{
  setToggle(!toggle);
}, [yourDepndency]);
 _

私があなたの要求を正しく理解したかどうかを理解するのを助けてください。

0
Seeta Ram Yadav