react.js - React的一个报错？

问题描述

问 题

页面上是个用户注册的表单，刚刷新的时候不会报错，一旦开始输入就会报错，报错信息如图：

想必就是handleChange()函数报错了

请问错在哪呢？

解决方案

首先说一下你排除错误的方法，因为用react你会经常遇到Cannot read property 'xxxxx' of undefined这个错误，那么你想没想过console.log一下那个undefined的东西，并一路回溯回去找到他呢？

然后再来谈你这个问题的错误。这是一个js从娘胎里带来的毛病，我知道你肯定是这么写component的

class YourClass extends React.Component{
    constructor(props){
        super(props)
        this.state={}
    }
    
    handleChange(e){
        //.......
    }
}

你在handleChange函数里面console.log(this)一下，会发现这个this是null，而不是你期待的YourClass，setState是YourClass从React.Component继承来的，null自然不会有setState这个方法。

那么就意味着你必须把外面的this指针传入handleChange函数里面。有大概三种方法
1、在调用的时候，看你这个情况应该是类似input或者textarea调用onChange方法时候调用的吧，原来你应该是这么写的:<input onChange={this.handleChange} />，把他改写成<input onChange={this.handleChange.bind(this)} />，这样，this指针就被传进去啦。
2、把handleChange函数用箭头函数的方式改写为

handleChange = (e) =>{
    //.....内容不变
}
这样改写出来的函数会被自动bind上他所处的class的this指针。调用的时候原样调用即可。

3、类似方法1，好像看到还有一种<input onChange={::this.handleChange}/>的写法，作用一样，相当于语法糖，应该还需要babel配合一些plugin来支持，所以可以忽略这个方法，上面两种就够用了

这篇关于react.js - React的一个报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！