我正在使用material-kit-theme，在其中您分别存储路径，这是index.js
{ path: "/login-page", name: "LoginPage", component: LoginPage },
{ path: "/register-page", name: "RegisterPage", component: RegisterPage},
在login.jsx内部，尝试在Link中传递寄存器组件的功能
class LoginPage extends React.Component {
constructor(props) {
super(props);
// we use this to make the card to appear after the page has been rendered
this.state = {
signInEmail: "",
signInPassword: "",
isSignIn: false,
user: {
id: "",
name: "",
email: "",
gender: "",
birthday: "",
avatar:"",
joined: ""
}
};
}
//load user
loadUser = (data) => {
//update user
this.setState({
user: {
id: data.id,
name: data.name,
email: data.email,
gender: data.gender,
birthday: data.birthday,
avatar:data.avatar,
joined: data.joined
}
})
}
}
// email change
onEmailChange = (event) => {
this.setState({ signInEmail : event.target.value})
}
//password change
onPasswordChange = (event) => {
this.setState({ signInPassword : event.target.value})
}
//submit change
onSubmitSignIn = () => {
fetch('http://localhost:3001/signin', {
method: 'post',
headers: {'Content-Type' : 'application/json'},
body: JSON.stringify({
email: this.state.signInEmail,
password: this.state.signInPassword
})
})
.then(response => response.json())
.then( user => {
if(user.id){
this.setState({ isSignIn: true})
}
})
}
render() {
const { classes, ...rest } = this.props;
if( this.state.isSignIn === true){
return <Redirect to='/home' component={Home} />
}
return (
<div>
<Header
fixed
color="montecarlo"
brand="Novel-list"
rightLinks={<HeaderLinks navLink1="" navLink2="" navLink3="" navLink4=""/>}
{...rest}
/>
<div
className={classes.pageHeader}
>
<Particles className={classes.particles}
params={ particlesOptions}
/>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card className={classes[this.state.cardAnimaton]}>
<form className={classes.form}>
<CardHeader className={classes.cardHeader}>
<h3>Login</h3>
</CardHeader>
<CardBody className={classes.cardbody}>
<FormControl fullWidth className={classes.signinform}>
<InputLabel htmlFor="email-address">Email</InputLabel>
<Input
type="email"
name="email-address"
id="email-address"
onChange={this.onEmailChange}
endAdornment={
<InputAdornment position="end">
<Email className={classes.inputIconsColor}/>
</InputAdornment>
}
/>
<InputLabel htmlFor="password" className={classes.passwordlabel}>Password</InputLabel>
<Input
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
endAdornment={
<InputAdornment position="end">
<LockOutline className={classes.inputIconsColor}/>
</InputAdornment>
}
/>
</FormControl>
</CardBody>
<CardFooter className={classes.cardFooter}>
<p className={classes.divider}>Don't have an account?
<Link
to={{
pathname: '/register-page',
state:{loadUser: this.loadUser}
}}
className={classes.register}
> Register
</Link>
</p>
<div className={classes.buttonplace}>
<Button className={classes.buttonsingin} size="sm" onClick={this.onSubmitSignIn} >
Sign In
</Button>
</div>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
</div>
);
}
}
export default withStyles(loginPageStyle)(LoginPage);
我正在尝试将loadUser函数传递给RegisterPage，有人建议使用Link组件中的状态参数，但是它没有用。它总是返回
未捕获（承诺）TypeError：无法读取的属性'loadUser' 在RegisterPage.jsx：115上未定义
这是register.jsx内部
class RegisterPage extends React.Component { constructor(props) {
super(props);
// we use this to make the card to appear after the page has been rendered
this.state = {
cardAnimaton: "cardHidden",
email: "",
password: "",
name: "",
isRegistered: false,
}; }
//name change onNameChange = (event) => {
this.setState({ name: event.target.value})
}
// email change onEmailChange = (event) => {
this.setState({ email : event.target.value}) }
//password change onPasswordChange = (event) => {
this.setState({ password : event.target.value}) }
//submit change onSubmitSignIn = () => {
fetch('http://localhost:3001/register', {
method: 'post',
headers: {'Content-Type' : 'application/json'},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
name: this.state.name
})
})
.then(response => response.json())
.then( user => {
if(user){
this.props.location.state.loadUser(user);
this.setState({ isRegistered: true})
}
}) }
render() {
const { classes, ...rest } = this.props;
if( this.state.isRegistered === true){
return <Redirect to='/home' component={Home}/>
}
return (
<div>
<Header
fixed
color="montecarlo"
brand="Novel-list"
rightLinks={<HeaderLinks navLink1="" navLink2="" navLink3="" navLink4=""/>}
{...rest}
/>
<div
className={classes.pageHeader}
>
<Particles className={classes.particles}
params={ particlesOptions}
/>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card className={classes[this.state.cardAnimaton]}>
<form className={classes.form}>
<CardHeader className={classes.cardHeader}>
<h3>Register</h3>
</CardHeader>
<CardBody className={classes.cardbody}>
<FormControl fullWidth className={classes.signinform}>
<InputLabel htmlFor="name">Full Name</InputLabel>
<Input
type="text"
name="name"
id="name"
onChange={this.onNameChange}
endAdornment={
<InputAdornment position="end">
<People className={classes.inputIconsColor}/>
</InputAdornment>
}
/>
<InputLabel htmlFor="email-address" className={classes.emaillabel}>Email</InputLabel>
<Input
type="email"
name="email-address"
id="email-address"
onChange={this.onEmailChange}
endAdornment={
<InputAdornment position="end">
<Email className={classes.inputIconsColor}/>
</InputAdornment>
}
/>
<InputLabel htmlFor="password" className={classes.passwordlabel}>Password</InputLabel>
<Input
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
endAdornment={
<InputAdornment position="end">
<LockOutline className={classes.inputIconsColor}/>
</InputAdornment>
}
/>
</FormControl>
</CardBody>
<CardFooter className={classes.cardFooter}>
<div className={classes.buttonplace}>
<Button className={classes.buttonsingin} size="sm" onClick={this.onSubmitSignIn} >
Register
</Button>
</div>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
</div>
); } }
export default withStyles(registerPageStyle)(RegisterPage);
但是，如果我尝试通过链接传递函数，则每次单击注册链接时，都会在登录页面中显示错误
未捕获的DOMException：无法在“历史记录”上执行“ pushState”： 函数（数据）{ //更新用户 _this.setState（{ 用户：{ id：data.id， n ......}无法克隆。