React预渲染时父传子回调函数undefined的构建错误排查

错误信息： #

Error: You provided an onClose prop to the Dialog, but the value is not a function. Received: undefined

先修正代码中的基础错误 #

你的代码里存在几个语法和笔误问题，这些问题会直接导致回调函数异常：

1. Parent组件中onClick的错误写法：直接写setIsOpen(true)会在组件渲染时立即执行，应该用箭头函数包裹：

<input onClick={() => setIsOpen(true)}>Click</input>

2. Parent组件的笔误：setOpen是setIsOpen的拼写错误，且箭头函数括号未闭合：

{isOpen && <Child callback={() => setIsOpen(false)} />}

3. Child和Modal组件缺少return语句：JSX组件必须返回内容，修正后：

// Child组件
const Child = ({ callback }) => {
  return (
    <Modal onClose={callback}>
      ...
    </Modal>
  )
}

// Modal组件
const Modal = ({ onClose, ...restProps }) => {
  return (
    <Transition.Root>
      <Dialog onClose={onClose} {...restProps}>
        ...
      </Dialog>
    </Transition.Root>
  )
}

处理预渲染/构建阶段的依赖问题 #

修正基础错误后，针对预渲染时回调变为undefined的问题，可通过以下方式解决：

1. 给组件Props设置默认空函数 #

在Child和Modal组件中，给回调Props设置空函数作为默认值，避免undefined传入Dialog：

// Child组件
const Child = ({ callback = () => {} }) => {
  return <Modal onClose={callback}>...</Modal>
}

// Modal组件
const Modal = ({ onClose = () => {}, ...restProps }) => {
  return (
    <Transition.Root>
      <Dialog onClose={onClose} {...restProps}>...</Dialog>
    </Transition.Root>
  )
}

2. 用useCallback缓存父组件回调 #

在Parent组件中使用useCallback缓存回调函数，确保回调引用稳定，让编译器识别到父与子组件的依赖关系：

import { useState, useCallback } from 'react';

const Parent = () => {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleClose = useCallback(() => {
    setIsOpen(false);
  }, []);

  return (
    <>
      <input onClick={() => setIsOpen(true)}>Click</input>
      {isOpen && <Child callback={handleClose} />}
    </>
  )
}

3. 在Modal中做兜底处理 #

在Modal组件中检查onClose的类型，确保传入Dialog的一定是函数：

const Modal = ({ onClose, ...restProps }) => {
  const safeOnClose = typeof onClose === 'function' ? onClose : () => {};
  
  return (
    <Transition.Root>
      <Dialog onClose={safeOnClose} {...restProps}>...</Dialog>
    </Transition.Root>
  )
}

内容的提问来源于stack exchange，提问作者emptyfullstack