Javascript React Hooks-在不调用函数的情况下记忆函数

我有一个用于控制模态的函数：

const getModalProps = useCallback(
(id) => ({
  onClose: () => handleClose(id),
  onOpen: () => handleOpen(id),
  isOpen: isOpen(id),
}),
[handleClose, handleOpen, isOpen],
);

这个想法是用来做一些类似

的事情。当我想以以下方式使用它时，问题出现了：

const modalProps = getModalProps('userModal');

useEffect(() => { modalProps.onOpen() }, [modalProps.onOpen])

这会导致无限循环，因为

modalProps.onOpen

实际上是一个匿名箭头函数，而不是useCallback memosed函数

我不知道如何使用

getModalProps

函数，该函数返回已记录的，但未调用的

handleOpen

和

handleClose

函数

类似这样的想法（我知道这是行不通的，只是一个概念）：

handleClose

和

handleOpen

只是您正常的

useCallback

函数

---

如果需要更多信息，请留下评论。

创建一个自定义钩子，用于创建已记忆的

onClose

和

onOpen

，并返回

modalProps

对象：

const useGetModalProps = id => { // you can also pass isOpen to the hook
  const onClose = useCallback(() => handleClose(id), [handleClose, id]);
  const onOpen = useCallback(() => handleOpen(id), [handleOpen, id]);

  return {
    onClose,
    onOpen,
    isOpen: isOpen(id),
  };
}

用法：

const modalProps = useGetModalProps('userModal');

useEffect(() => { modalProps.onOpen() }, [modalProps.onOpen])

或

谢谢，我花了太多时间试图让一个钩子负责所有事情。这把我引向了正确的方向，不客气。当你投资于解决方案时，有时很难以不同的方式看待问题。

const modalProps = useGetModalProps('userModal');

useEffect(() => { modalProps.onOpen() }, [modalProps.onOpen])

<Modal {...modalProps } />