reactjs - 如何创建接收依赖项的自定义 Hook ？

Question

我正在制作一个自定义钩子(Hook)，当某些状态发生变化时，它有一个toogle。

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

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 has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies.eslint(react-hooks/exhaustive-deps)

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

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

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

    return toggle
}

这给了我警告

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.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
}