React类组件访问props报undefined类型错误如何解决

报错本质是执行mintNft方法时，方法内部的this指向为undefined，触发原因有两个：

1. 类组件构造函数写法不规范：定义constructor时没有接收props入参，也没有把props传给super()调用，会导致组件实例初始化阶段this.props赋值异常。
2. 事件绑定写法错误：mintNft是挂载在组件实例上的类方法，但是在render里写onClick={mintNft}时没有加this.前缀，JS会沿着作用域链查找全局/外层作用域的mintNft，最终拿到的函数执行时内部this为undefined，访问this.props时就会抛出类型错误，因为mintNft是async异步函数，错误会被包装为Promise未捕获的形式抛出，和你看到的报错信息完全匹配。

按以下步骤修改代码即可：

• 修正构造函数写法，接收props并传入super：

constructor(props) {
  super(props);
  this.state = {
    balance: [],
  };
}

• 修正render中的事件绑定，给mintNft加上this.前缀。由于你定义的mintNft是箭头函数形式的类属性，本身已经绑定了组件实例的this指向，不需要额外做bind处理：

<button onClick={this.mintNft}>Mint</button>

• 可选优化项：
  • 你在componentDidMount里混用了async/await和.then的异步写法，可以统一成async/await语法减少逻辑歧义：

    async componentDidMount() {
      const output = await axios.get(`https://api.cronoscan.com/api?module=stats&action=tokensupply&contractaddress=${ADDRESS}&apikey=${apikey}`)
      this.setState({
        balance: output.data.result
      })
    }
    

  • 你在render里从state解构了nftdata，但初始state中没有声明这个字段，如果后续要使用记得在state里添加对应初始值，避免出现undefined相关的错误。

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