如何创建一个自定义的钩子来获取依赖关系

Question

我正在做一个自定义的钩子，当状态发生变化时，它会带有一个togleg。

您应该能够传递数组中的任何状态。

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在其依赖项数组中具有一个split元素。这意味着我们不能静态地验证您是否已经传递了正确的依赖项。eslint（react-hooks / exhaustive-deps）

我还有另一种情况不起作用

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

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

    return toggle
}

这给了我警告

React Hook useEffect传递了一个非数组文字的依赖项列表。这意味着我们不能静态地验证您是否已经传递了正确的依赖项。eslint（react-hooks / exhaustive-deps）

我如何在没有警告且没有禁用eslint的情况下通过这项工作做到这一点？

Answer 1

在这种情况下，依赖列表的使用非常特殊。
除了忽略或沉默警告之外，我看不到其他方法。

要消除警告，我们不必eslint完全禁用。
您可以为此特定行禁用此特定规则：

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

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

    return toggle
}