React报错this.props.handleRefresh is not a function

TypeError: this.props.handleRefresh is not a function报错和props层级传递、拼写无关，是两处基础写法错误导致传递到子组件的handleRefresh不是函数类型：

1. App.js构造函数内的方法绑定逻辑完全错误：代码写的this.handleRefresh = this.handleRefresh(this);会在组件初始化时直接执行handleRefresh方法，由于该方法没有返回值，最终赋值给实例this.handleRefresh的是undefined，后续层层传给子组件的自然不是可调用的函数。
2. Coin.jsx缺失React Component的导入声明：组件直接写class Coin extends Component，但未从react包中引入Component，会导致组件实例上下文异常。

• 修正App.js构造函数的方法绑定写法，类组件自定义方法绑定this的正确写法是调用bind方法传入上下文，不要加括号直接执行方法：
  将构造函数中错误的绑定代码

  this.handleRefresh = this.handleRefresh(this);
  

  替换为

  this.handleRefresh = this.handleRefresh.bind(this);
  

• 补全Coin.jsx的导入声明，在文件顶部加入React和Component的导入：

  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  

• 可选优化：在Coin组件的propTypes校验中补充handleRefresh的类型规则，提前规避传参错误：

  Coin.propTypes = {
    name: PropTypes.string.isRequired,
    ticker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    handleRefresh: PropTypes.func.isRequired
  }
  

注：你代码里从App到CoinList、再到Coin的props逐层传递逻辑本身是正确的，之前排查不到问题是因为错误出在最源头的方法绑定环节，App实例本身的handleRefresh属性就已经不是函数了，和下层传递逻辑无关。

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