React不调用Memoise函数

Question

我有一个用来控制我的情态的功能：

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

其想法是使用类似于<Modal {...getModalProps('userModal')} />的东西。当我想以下列方式使用它时，问题就出现了：

const modalProps = getModalProps('userModal');

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

这会导致无限循环，因为modalProps.onOpen实际上是一个匿名箭头函数，而不是useCallback回传函数。

对于如何使用getModalProps函数(返回回忆录，但没有调用handleOpen和handleClose的函数)，我感到不知所措。

这样的想法(，我知道这是行不通的，只是一个概念)：

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

handleClose和handleOpen只是普通的useCallback函数。

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

Answer 1

创建一个创建回忆录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])

或

<Modal {...modalProps } />