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");
}
})