问

javascript - react组件里的方法，没法读取组件的state状态？

奥运精神永相随发布于 2022-11-11 04:16

自己写了个登陆表单，登录信息存在组件state里，
在提交方法里要读取相应值，代码如下：

class Login extends React.Component {

    constructor(props){
        super(props);
        this.state = {email:"",password:"",};
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
      this.setState({[e.target.name]: e.target.value})
    }

    handleSubmit(e) {
      e.preventDefault();
      let emails = this.state.email;
      let passwords = this.state.password;

      let loginurl = "/login?username=" + emails + "&password=" + passwords;

      AjaxGet('GET', loginurl, (res) => {...})

    }

    render(){
        var email = this.state.email;
        var password = this.state.password;

        return (
            
               
               
            
        ) ;
    }
}

export { Login as default } ;

报错提示：

Uncaught TypeError: Cannot read property 'state' of null

我怕很奇怪为什么会这么报错？render方法里面是可以调用的啊。

3 个回答

1、首先我很疑惑这里，一个组件必须包含在一个闭合的标签内，你这里返回的是两个：
```
return (
            <input type="email" name="email" value={email} onChange={this.handleChange} />
            <input type="password" name="password" value={password} onChange={this.handleChange} />
        ) ;
```
2、报错信息是不能读取 state ，很明显又是函数调用时上下文不对，根据你提供的代码来看，handleChange 已经绑定了作用域，render 不可能出现问题，那就只有 handleSubmit 了，话说你是怎么调用这个方法的，你也没有给这个方法绑定作用域
2022-11-12 01:52 回答

形同陌路2502906543
不能直接给this.state 赋值，请使用 this.setState()来更改 this.state

2022-11-12 01:52 回答

克阳光沫沫的幸福
在constructor方法里再加一行：
```
this.handleSubmit = this.handleSubmit.bind(this)
```
不过你的写法不太推荐。除了通过bind改变上下文，还有一种方法就是通过匿名函数，可以减少代码量
```
<form onSubmit={(e)=>this.handleSubmit(e)}> </form>
```
你可以看一下我的《深入理解 React 中的上下文 this》那篇文章
2022-11-12 01:52 回答

回忆的沙漏2502890423

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签