首页 > react--退出登录时setState报错?

react--退出登录时setState报错?

import React, { Component } from 'react';
import { Link } from 'react-router';
import Listener from './Listener';
import 'whatwg-fetch';

class Header extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { login: false, name: '' }
  }
  handleClick() {
    fetch('http://url.com/api/logout', {    //发送退出登录的请求
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(function(res) {
      if (res.ok) {
        this.setState({ login: !this.state.login })    
        //反转登录状态,按理说state变了,就应该重新渲染UI,然而却报错了
      } else {
        alert("logout failed");
      }
    })
    .catch(function(error) {
      console.log('logout failed', error)
    })
  }
  render() {
    let styles = {
      ...    //样式代码
    }
    const login = (username) => {
      this.setState({ login: !this.state.login, name: username })
    }
    Listener.started.add(login);
    if(this.state.login) {
      return (
        <div style={styles.headerStyle}>
          <div style={styles.usernameStyle}>{this.state.name}</div>
          <div style={styles.LogoutStyle} onClick={this.handleClick}>Log out</div>
        </div>
      )
    } else {
      return (
        <div style={styles.headerStyle}>
          <Link to="/login" style={styles.linkStyle}>登录</Link>
          <Link to="/signup" style={styles.linkStyle}>注册</Link>
        </div>
      )
    }
  }
}

export default Header;

这个一个Header,在已经登录的情况下,点击Log out按钮会触发handleClick()函数,函数发送退出登录请求后会反转state状态,UI理应重新渲染,然而却报错,看这错误信息似乎是语法错误?求助~谢谢~


报错已经说的很明白了,这里的 this 指向的对象没有 setState 这个方法,你仔细看看:

.then(function(res) {
      if (res.ok) {
        this.setState({ login: !this.state.login })    
        //反转登录状态,按理说state变了,就应该重新渲染UI,然而却报错了
      } else {
        alert("logout failed");
      }
    })

这里的 this 指向什么?
既然你用了 ES6 那你可以用箭头函数,这样写:

.then((res) => {
      if (res.ok) {
        this.setState({ login: !this.state.login })    
        //反转登录状态,按理说state变了,就应该重新渲染UI,然而却报错了
      } else {
        alert("logout failed");
      }
    })
【热门文章】
【热门文章】