有没有办法记住从参数传递的函数 - (useCallback) 穷举

Question

所以我有这个小片段：

const useTest = (callbackFunc) => {
const user = useSelector(selector.getUser); //  a value from store
useEffect(() => {
if (user.id === 1) {
callbackFunc()
}
}, [callbackFunc, user.id])
}

在上面的代码中，如果在传递之前没有记住callbackFunc(包装在useCallback中(，则useEffect将触发无限循环。

将函数包装在钩子内的 useCallback 上仍然会触发无限循环，所以这是一个不：

const cb = () => useCallback(() => callbackFunc, [callbackFunc]);

以上将触发 infite 循环，因为callbackFunc.

是的，我很清楚我可以在传递到这个钩子之前将函数包装在useCallback中，我唯一的问题是：在调用这个钩子时，其他/未来的开发人员很有可能只会传递一个非记忆函数，这就是我担心的。

由于exhaustive-deps规则，我无法删除useEffect/useCallback第二个参数数组上的callbackFunc- 并且更高的开发人员也禁止删除它(或在此行上(。

知道我怎样才能实现我的目标吗？如果没有，我只会祈祷其他开发人员在使用之前先阅读钩子。

Answer 1

你可以做这样的事情，但你将无法再修改回调

const funcRef = React.useRef(null)
useEffect(() => {
funcRef = callbackFunc
}, [])
useEffect(() => {
if (funcRef.current){
if (user.id === 1) {
funcRef.current()
}
}
}, [funcRef, user.id])