Как создать пользовательский хук, который получает зависимости - PullRequest
Новая
       13

Как создать пользовательский хук, который получает зависимости

5 голосов
/ 03 октября 2019

Я делаю пользовательский хук, который имеет переключатель при изменении состояния.

Вы должны быть в состоянии передать любое состояние в массиве. 

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

И это должно бытьиспользуется как 

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

Но это дает мне следующее предупреждение

React Hook useEffect имеет элемент расширения в своем массиве зависимостей. Это означает, что мы не можем статически проверить, правильно ли вы передали правильный файл dependencies.eslint (response-hooks / исчерпывающий deps)

У меня также есть другая ситуация, когда она не работает 

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

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

    return toggle
}

Это дает мне предупреждение

React Hook useEffect был передан список зависимостей, который не является литералом массива. Это означает, что мы не можем статически проверить, правильно ли вы передали правильный файл dependencies.eslint (реагировать-зацепки / исчерпывающе-deps)

Как я могу сделать это с этой работой без предупреждения и без отключенияeslint

1 Ответ

0 голосов
/ 03 октября 2019

Использование списка зависимостей в этом случае весьма своеобразно.
Я не вижу другого пути, кроме как игнорировать или отключить предупреждение.

Чтобы отключить предупреждение, нам не нужно отключать eslintполностью.
Вы можете отключить это конкретное правило для этой конкретной строки: 

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

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

    return toggle
}
...