Question

我正在使用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 ......}无法克隆。

反应路由器v4中的链接传递函数失败

0 个答案: