React父传子函数报错：this.props.thatFun非函数但功能可用

这种情况确实挺让人头疼的——明明函数已经正常触发（能看到控制台的日志），却还弹出Uncaught TypeError: this.props.thatFun is not a function的错误，我来帮你拆解可能的原因和解决办法：

可能的原因及对应解决方案 #

1. 子组件存在错误的函数调用时机 #

最常见的情况是你在子组件的渲染过程中直接执行了函数（比如加了括号），而不是把它当作回调传递。举个例子：

• ❌ 错误写法：

  // 子组件render里直接执行函数，会在每次渲染时调用，可能在某个渲染周期里props还未传递完成
  <div>{this.props.thatFun()}</div>
  

• ✅ 正确写法（如果是事件回调）：

  <button onClick={this.props.thatFun}>触发函数</button>
  

如果确实需要在渲染时执行函数，一定要先判断函数是否存在：

<div>
  {typeof this.props.thatFun === 'function' && this.props.thatFun()}
</div>

2. 父组件的函数未正确绑定this #

如果你的父组件是类组件，类方法的this指向可能会丢失，导致在某些场景下函数变成undefined。你可以用两种方式绑定：

• 方式一：用箭头函数定义类方法

  class Parent extends React.Component {
    // 箭头函数自动绑定this
    thatFun = () => {
      console.log("wowow I got you i got the function!");
    }
  
    render() {
      return <Child thatFun={this.thatFun} />;
    }
  }
  

• 方式二：在构造函数中手动绑定

  class Parent extends React.Component {
    constructor(props) {
      super(props);
      this.thatFun = this.thatFun.bind(this);
    }
  
    thatFun() {
      console.log("wowow I got you i got the function!");
    }
  
    render() {
      return <Child thatFun={this.thatFun} />;
    }
  }
  

3. 父组件存在条件渲染，未始终传递thatFun #

如果父组件是根据某些条件渲染子组件，可能在某个条件下没有传递thatFun这个props，但子组件依然尝试调用它。比如：

// 父组件
render() {
  return (
    <>
      {this.state.isShow && <Child thatFun={this.thatFun} />}
      {/* 假设还有另一个场景渲染Child，但没传thatFun */}
      {!this.state.isShow && <Child />}
    </>
  )
}

这种情况下，当!this.state.isShow为真时，子组件的this.props.thatFun就是undefined，调用时就会报错。解决办法是确保子组件始终能拿到这个函数，或者在子组件调用前做类型判断。

4. 子组件异步操作中调用函数时，组件已卸载或props已更新 #

如果子组件在setTimeout、网络请求回调等异步操作中调用this.props.thatFun，可能此时组件已经被卸载，或者父组件传递的props已经发生变化，导致thatFun变成undefined。你可以在子组件中添加卸载判断：

class Child extends React.Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
    setTimeout(() => {
      if (this._isMounted && typeof this.props.thatFun === 'function') {
        this.props.thatFun();
      }
    }, 1000);
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  // ...其他代码
}

快速排查步骤 #

1. 先在子组件所有调用thatFun的地方，加上typeof this.props.thatFun === 'function'的判断，先抑制错误；
2. 检查父组件中thatFun的绑定方式，确保this指向正确；
3. 排查父组件是否有条件渲染子组件的场景，确认thatFun始终被传递；
4. 查看子组件中是否有异步操作调用函数的情况，添加组件挂载状态判断。

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