React中TypeError: undefined is not an object (evaluating 'this.setState')求助

嘿，我一眼就看出你遇到的是React里经典的**this指向丢失**问题，咱们一步步拆解原因和解决方案：

为啥会报错？ #

你的代码里有两个关键问题导致了这个错误：

1. 你把login函数直接定义在了constructor内部，作为普通函数，这里的this根本不指向React组件实例——在严格模式下它就是undefined，自然没法调用this.setState。
2. 还有个隐藏坑：你的按钮绑定了handleClick方法，但代码里完全没定义这个函数，点按钮肯定还会触发新错误。

一步步修复 #

第一步：把login移到类原型上，绑定正确的this

React类组件里的方法如果是普通函数，默认不会绑定组件实例的this，咱们有三种常用方式解决，推荐第二种最简洁的：

方式1：在constructor里手动绑定（传统写法）

class Login extends Component{ 
  constructor(props){ 
    super(props); 
    this.state ={ 
      email: '', 
      password: '', 
      isAuthenticated: false 
    }; 
    // 手动把this绑定到组件实例，不然方法里的this会丢
    this.login = this.login.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  // 把login移出来作为类方法
  login(username, email){ 
    sessionStorage.setItem('loginSessionUsername', username); 
    sessionStorage.setItem('loginSessionEmail', email); 
    this.setState({isAuthenticated: true}) 
  }

  // 补上之前缺失的handleClick方法
  handleClick(event) {
    event.preventDefault();
    // 这里替换成你的实际登录验证逻辑，比如调用后端API
    // 示例：假设验证通过，传入用户名和邮箱
    this.login('testUser', this.state.email);
  }

  render(){ 
    const isAuthenticated = this.state.isAuthenticated; 
    if(isAuthenticated){ 
      return( 
        <div> 
          <Servicedesk /> 
        </div> 
      ) 
    } 
    return( 
      <div id='Login' className='setVisible'> 
        <div> 
          <label>Emailadres</label> 
          <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/> 
          <label>Wachtwoord</label> 
          <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/> 
          <br /> 
          <button onClick={this.handleClick}>Submit</button> 
        </div> 
      </div> 
    ) 
  } 
} 
export default Login;

方式2：用箭头函数定义类方法（推荐！简洁省心）

箭头函数会自动继承当前上下文的this，不需要手动绑定，代码更清爽：

class Login extends Component{ 
  constructor(props){ 
    super(props); 
    this.state ={ 
      email: '', 
      password: '', 
      isAuthenticated: false 
    }; 
  }

  // 箭头函数自动绑定组件实例的this
  login = (username, email) => { 
    sessionStorage.setItem('loginSessionUsername', username); 
    sessionStorage.setItem('loginSessionEmail', email); 
    this.setState({isAuthenticated: true}) 
  }

  // 同样用箭头函数写handleClick
  handleClick = (event) => {
    event.preventDefault();
    // 这里添加你的登录验证逻辑，比如调用API检查账号密码
    this.login('testUser', this.state.email);
  }

  render(){ 
    const isAuthenticated = this.state.isAuthenticated; 
    if(isAuthenticated){ 
      return( 
        <div> 
          <Servicedesk /> 
        </div> 
      ) 
    } 
    return( 
      <div id='Login' className='setVisible'> 
        <div> 
          <label>Emailadres</label> 
          <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/> 
          <label>Wachtwoord</label> 
          <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/> 
          <br /> 
          <button onClick={this.handleClick}>Submit</button> 
        </div> 
      </div> 
    ) 
  } 
} 
export default Login;

方式3：在render里用箭头函数绑定（不推荐，影响性能）

这种写法虽然简单，但每次组件渲染都会创建新的函数实例，可能导致不必要的重渲染，适合小型组件或者临时场景：

// 在render里的按钮这么写：
<button onClick={(event) => this.handleClick(event)}>Submit</button>

第二步：完善登录逻辑

别忘了在handleClick里替换掉示例代码，加上实际的登录验证逻辑——比如用fetch或者axios调用后端API，验证邮箱和密码正确后，再调用login方法更新状态和存储会话信息。

额外提醒 #

• 确保Servicedesk组件已经正确导入到当前文件，不然会出现组件未定义的错误。
• 用户退出的时候，记得清除sessionStorage里的登录信息，避免残留状态。

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