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

我正在做一个自定义的钩子，当状态发生变化时，它会带有一个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的情况下进行这项工作？

— 文科夫斯基
source

你是对的。我的回答是错误的。我删除了它，以免进一步混淆您和其他人。我向🙏致歉

— dance2die'19

@ dance2die您的回答没错，但只是发出了另一种警告。

— Vencovsky

感谢您的客气话。我也无法使其与裁判配合使用，所以我将把这件事留给其他人:)

— dance2die

对于第二个示例，只需将依赖项放入数组中：useEffect(() => { setToggle(t => !t) }, [dependencies])

— Jon B

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

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

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

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

    return toggle
}

— 凯达
source