如何创建一个接收依赖关系的自定义钩子?

Question

我正在制作一个自定义钩子，当某些状态发生变化时，它有一个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 在其依赖数组中有一个 spread 元素。这意味着我们无法静态验证您是否传递了正确的依赖项.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
}

Answer 2

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

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

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

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

Answer 3

在第一种情况下，要求您避免数组扩展， 所以你应该只传递整个依赖列表：

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 4

把我的记录留在这里，有时我也会忘记

const useCustomHook = (props, deps) => {
const value = useMemo(()=> props.value, deps)
return {value}
}