如何调用一个接受useEffect内部参数的自定义钩子

Question

在我的组件中，我使用了一个想要提取的函数，它使用了一些钩子来设置url参数。我创建了一个自定义挂钩。

function useMyCustomHook() {
const history = useHistory();
const location = useLocation();
const locationParams = new URLSearchParams(location.search);
function myCustomHook(id: string ) {
does something
}
return myCustomHook;
}

所以我提取了它，如上所示，现在我想在我的另一个组件和useEffect钩子中使用它。

const { myCustomHook } = useMyCustomHook(); // It asks me to add parameters, 
but I want to pass it inside useEffect

useEffect(() => {
if (something) myCustomHook(myParam);

}, [foo]);

这是一种可能的方法吗？或者有更好的解决方案，我可以用钩子提取一些东西，然后用参数在useEffect中重用它？非常感谢。

Answer 1

首先你需要导出你的自定义Hook，我认为如果你需要返回一个带有id的函数，那么每个id更改都需要执行该函数。

自定义挂钩

import { useCallback} from "react"
import {useNavigate, useLocation} from "react-router-dom"
export const useMyCustomHook = (id) => {
const navigate = useNavigate() // React-router v6
const location = useLocation()
const locationParams = new URLSearchParams(location.search)
const anyFunction = useCallback(() => {
// does something
}, [id]) // the function execute if "id" change
return anyFunction
}

您想在哪里使用自定义挂钩

import {useMyCustomHook} from "your router"

const {anyFunction} = useMyCustomHook(id) // your pass the id
useEffect(() => {
if  (something) anyFunction()
}, [foo])

我认为这是更好的方式。useCallback仅呈现params更改的函数。