React子组件调用props方法报is not a function排查

你遇到的Uncaught TypeError: this.props.getDataFromRun is not a function以及后续可能出现的状态异常问题，由3处代码错误共同导致，按优先级修复即可：

• 1. 父组件类方法未绑定实例this
     你在TestReport中定义的getDataFromRun是普通类方法，默认不会绑定组件实例的this上下文，直接作为props传递给子组件时，不仅会导致方法内部调用this.setState时报错，在部分严格模式/编译配置下还会出现方法引用丢失的问题。
     修复方式二选一即可：
  • 方式1：将方法改为箭头函数类属性（最简便，推荐）

  // 直接替换原来的getDataFromRun定义
  getDataFromRun = (data) => {
    this.setState({
      tests: data.tests,
      failedTests: data.failedTests,
      testcaseName: data.testcaseName,
      failureMessage: data.failureMessage,
      failureType: data.failureType,
      timestamp: data.timestamp
    });
  }
  

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

  constructor(props) {
    super(props);
    this.state = {
      tests: 0,
      failedTests: 0,
      testcaseName: [],
      failureMessage: [],
      failureType: [],
      timestamp: new Date()
    }
    // 新增这行绑定
    this.getDataFromRun = this.getDataFromRun.bind(this);
  }
  

• 2. 类组件构造函数未正确接收props
     你当前TestReport的构造函数写的是constructor() { super(); }，没有接收props参数也没有传给super，会导致组件实例初始化阶段this.props指向异常，属于React类组件的标准写法错误，必须修正为constructor(props) { super(props); }。
• 3. 子组件传值时机完全错误
     你在Run组件的componentDidMount中，发起getTests异步请求后立刻同步调用this.props.getDataFromRun(this.state)，此时存在两个问题：
  • 异步请求还没返回结果，this.state还是初始默认值，不是你要同步的接口数据
  • React的setState是异步批量更新的，同步代码里立刻拿this.state拿到的还是旧值
    修复方式：把传值逻辑放到getTests的then回调中，拿到接口返回结果后直接传值即可，如果需要依赖本地更新后的state，也可以放到setState的第二个回调参数里执行。
    修复后的componentDidMount代码：

  componentDidMount() {
    this.getTests().then(result => {
      // 先更新本地state
      this.setState({
        tests: result.tests,
        failedTests: result.failedTests,
        testcaseName: result.testcaseName,
        failureMessage: result.failureMessage,
        failureType: result.failureType,
        timestamp: result.timestamp
      }, () => {
        // setState更新完成后再传值，此时拿到的是最新state
        this.props.getDataFromRun(this.state);
      });
      // 也可以直接用result传值，不需要等setState：this.props.getDataFromRun(result)
    });
  }
  

额外排查点 #

如果完成以上修复后仍然报不是函数的错误，优先检查两点：

• TestReport.js顶部是否正确导入了Run组件，路径要和本地文件位置匹配
• 父子组件传递/接收的prop名是否完全一致，注意大小写，不要出现getDataFromrun这类拼写错误。

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