React Hooks报错：Uncaught TypeError: t is not a function 问题排查

问题原因 #

控制台的Uncaught TypeError: t is not a function报错，本质是调用closePopup时它并非有效函数（大概率是undefined）。哪怕弹窗能正常关闭，说明多数渲染周期里函数传递正常，但存在某个渲染瞬间closePopup未被正确传入。

解决方案 #

1. 确保props传递完全正确

检查MobileProvider中渲染FormSearch的代码，必须明确传递closePopup函数，且变量名拼写一致：

// MobileProvider组件内的渲染部分
{showPopup && (
  <div className="popup">
    <FormSearch closePopup={closePopup} /> {/* 确认这里传递的是定义好的closePopup函数 */}
  </div>
)}

常见错误：漏传prop、变量名拼写错误（比如写成closepopup）、误传了setShowPopup而非自定义的closePopup。

2. 在子组件中添加防御性检查

即使传递正确，也可能存在组件初始化时closePopup未就绪的情况，在调用前做类型校验或使用可选链：

function FormSearch({ closePopup }) {
  const submitSearch = (event) => {
    event.preventDefault();
    // 方式1：可选链操作符，仅当closePopup是函数时调用
    closePopup?.();
    
    // 方式2：显式类型判断
    // if (typeof closePopup === 'function') {
    //   closePopup();
    // }
  };

  // 组件其余代码...
}

3. 排查条件渲染边界情况

如果FormSearch是在弹窗内部做条件渲染，确保弹窗显示的所有场景下，closePopup都能被正确传递。比如避免在异步逻辑或状态更新的间隙，渲染未携带完整props的FormSearch。

完整修正代码示例 #

MobileProvider组件

import { useState } from 'react';
import FormSearch from './FormSearch';

function MobileProvider() {
  const [showPopup, setShowPopup] = useState(false);

  const closePopup = () => {
    setShowPopup((prev) => !prev);
  };

  return (
    <div>
      <button onClick={() => setShowPopup(true)}>打开搜索弹窗</button>
      
      {showPopup && (
        <div className="popup-container">
          <FormSearch closePopup={closePopup} />
        </div>
      )}
    </div>
  );
}

export default MobileProvider;

FormSearch组件

function FormSearch({ closePopup }) {
  const submitSearch = (event) => {
    event.preventDefault();
    closePopup?.();
  };

  return (
    <form onSubmit={submitSearch}>
      <input type="text" placeholder="输入搜索内容" />
      <button type="submit">提交并关闭弹窗</button>
    </form>
  );
}

export default FormSearch;

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