Wie erstelle ich einen benutzerdefinierten Hook, der Abhängigkeiten empfängt?

10

Ich mache einen benutzerdefinierten Hook, der ein Google hat, wenn sich ein Status ändert.

Sie sollten in der Lage sein, einen beliebigen Status in einem Array zu übergeben.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

Und es sollte als verwendet werden 

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

Aber es gibt mir die folgende Warnung

React Hook useEffect hat ein Spread-Element in seinem Abhängigkeitsarray. Dies bedeutet, dass wir nicht statisch überprüfen können, ob Sie die richtigen dependencies.eslint (react-hooks / erschöpfende-deps) übergeben haben.

Ich habe auch eine andere Situation, in der es nicht funktioniert

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

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

    return toggle
}

Dies gibt mir die Warnung

React Hook useEffect wurde eine Abhängigkeitsliste übergeben, die kein Array-Literal ist. Dies bedeutet, dass wir nicht statisch überprüfen können, ob Sie die richtigen dependencies.eslint (react-hooks / erschöpfende-deps) übergeben haben.

Wie kann ich diese Funktion ohne Warnung und ohne Deaktivierung von eslint ausführen?

reactjs react-native eslint react-hooks Vencovsky
quelle
Du hast recht. Meine Antwort ist absolut falsch. Ich habe es gelöscht, um Sie und andere nicht weiter zu verwirren. Ich entschuldige mich dance
dance2die
@ dance2die Deine Antwort war nicht falsch, aber es gab nur eine andere Art von Warnung.
Vencovsky
1
Danke für die netten Worte. Ich konnte es auch nicht mit
Schiedsrichtern zum Laufen bringen,
Für Ihr zweites Beispiel setzen Sie einfach Abhängigkeiten in ein Array:useEffect(() => { setToggle(t => !t) }, [dependencies])
Jon B

Antworten:

0

Die Verwendung der Abhängigkeitsliste ist in diesem Fall sehr eigenartig.
Ich sehe keinen anderen Weg, als die Warnung zu ignorieren oder zum Schweigen zu bringen.

Um die Warnung zum Schweigen zu bringen, müssen wir sie nicht eslintvollständig deaktivieren .
Sie können diese bestimmte Regel für diese bestimmte Zeile deaktivieren:

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

    /* eslint-disable react-hooks/exhaustive-deps */
    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}
ckedar
quelle