[英]react.js this2.setState is not a function
你好,每个人在退出时都试图将用户\\重定向到主页,但是我遇到了一些问题。 我在react路由器中使用重定向,并且应该重定向到主页,因为重定向是正确的,但是我收到一个奇怪的错误,说this2.setState不是一个函数。
有人知道这意味着什么吗? 谢谢您的帮助!
import React from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
Button,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
import { withRouter } from "react-router";
import Icon from "react-icons-kit";
import { car } from "react-icons-kit/fa/car";
import { Redirect, Link } from "react-router-dom";
import app from "../config/dev";
export default class NavigatioBar extends React.Component {
constructor(props) {
super(props);
this.state = {
authenticated: false,
currentUser: null,
redirect: false,
isOpen: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
signout() {
app
.auth()
.signOut()
.then(user => {
this.setState({ redirect: true });
});
}
componentWillMount() {
app.auth().onAuthStateChanged(user => {
if (user) {
this.setState({
currentUser: user,
authenticated: true
});
} else {
this.setState({
currentUser: null,
authenticated: false
});
}
});
}
render() {
const { redirect } = this.state;
if (redirect) {
return <Redirect to="/" />;
}
alert(this.state.authenticated);
const authenticated = this.state.authenticated;
return (
<div>
<Navbar color="primary" dark expand="md">
<div className="container">
<NavbarBrand href="/">
<Icon className="car-icon" icon={car} />
G66 CARS
</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/cars">CARS</NavLink>
</NavItem>
<NavItem>
<NavLink href="/">FINANCE</NavLink>
</NavItem>
<NavItem>
<NavLink href="/">SERVICE</NavLink>
</NavItem>
<NavItem>
<NavLink href="/">PARTS</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
ABOUT
</DropdownToggle>
<DropdownMenu>
{authenticated ? (
<DropdownItem onClick={this.signout}>
<Button classname="btn-btn-primary">SignOut </Button>
</DropdownItem>
) : (
<DropdownItem>
<Link to="/login"> Login </Link>
</DropdownItem>
)}
<DropdownItem>ABOUT US</DropdownItem>
<DropdownItem>STAFF</DropdownItem>
<DropdownItem>CONTACT US</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</div>
</Navbar>
</div>
);
}
}
尝试在构造函数中绑定signout()
函数以获取this
上下文:
this.signout = this.signout.bind(this);
在使用箭头函数之前,每个新函数都定义了自己的this
值。 作为Anshul写道,箭头的功能没有自己的this
方面。 所以,你可以使用signout = () => {}
在您的NavigationBar
部分,它会自动访问它的this
背景。
signout = () => {
app.auth().signOut().then((user) => {
this.setState ({ redirect: true })
})
}
退出没有此上下文。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.