Question

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

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

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

您真的需要根据问题创建自定义钩子吗？

您可以使用useEffect来检查您的依赖项是否已更改（如果已更改），请在组件中设置类似这样的切换。

const [toggle, setToggle] = useState(false);
useEffect(() =>{
  setToggle(!toggle);
}, [yourDepndency]);

帮助我了解我是否正确理解了您的要求。

Answer 2

在第一种情况下，系统要求您避免数组扩散，因此，您应该只将dependencyList作为一个整体传递：

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

下一个警告提示您错过依赖关系（setToggle）。

您可以将useCallback与内部效果相关性一起使用，然后使用钩子用户提供的相关性将其包装在useEffect中：

import { useCallback, useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

Answer 3

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

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

id

Answer 4

请勿在useEffect输入中使用扩展运算符，更像这样：

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

如何创建自定义的钩子来获取依赖项

4 个答案: