1
votes

Réagir transmettre les valeurs d'état à var ne fonctionne pas

Je suis revenu pour réagir après une pause et essayer de me copier l'état dans:

    this.props.dispatch(login(data));

Pour une raison quelconque, j'ai eu l'erreur:

ReferenceError: le mot de passe n'est pas défini à eval (eval at ...

Je ne peux pas vraiment comprendre comment j'ai une telle erreur sur un truc simple. Travailler sur la version:

import React, { Component } from 'react';
import { connect } from "react-redux";
import { HashRouter, Route } from 'react-router-dom';
import { login } from '../actions/loginActions';

class Login extends Component {
  constructor (props) {
    super(props)
    this.state = {
      email: "",
      password: "",
      token: "",
      redirect: false

    };

    this.onLogin = this.onLogin.bind(this)
    this.onLogout = this.onLogout.bind(this)
  }
  handleUpdateEmail = (e) =>{
    console.log('handleUpdateEmail: '+e.target.value)
    this.setState({email: e.target.value});

  }
  handleUpdatePassword = (e) =>{
    console.log('handleUpdatePassword: '+e.target.value)
    this.setState({password: e.target.value});
  }
  componentWillMount() {
    this.state =  { token: localStorage.getItem('token') }
  }

  onLogin = () => {

    var { email, password } = this.state;
    let data = {
      'email': email,
      'password': password    
    }
    this.props.dispatch(login(data));
  }

  onLogout = state =>{
    localStorage.removeItem('token');
  }
  render() {
    const { redirect } = this.state;
    if (redirect) {
      return (
        <HashRouter>
        <Route path='/' component={() => window.location = '/'}/>
        </HashRouter>
      );
    }
    return (
      <div className="app flex-row align-items-center">
      <form onSubmit={this.onLogin} >
        <label>
        Username:
        <input type="text" placeholder="Username" onChange={this.handleUpdateEmail}/>

        </label>
        <label>
        Password:
        <input type="password" placeholder="Password" onChange={this.handleUpdatePassword} />

        </label>
        <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
const mapStateToProps = state => ({
    logs: state

  });
  export default connect(mapStateToProps)(Login);

Et moi le code est:

"react": "^16.7.0",

Comment dois-je aborder ce genre d'erreur? Et probablement comment résoudre ce problème?

--EDIT-- Après moi, les amis ci-dessous m'aident, je comprends que le problème est que la fonction

var {email, password } = this.state;

appelle avant que les données n'obtiennent les valeurs d'état. comment puis-je le forcer à attendre que les données soient définies?

reactjs state redux

8 commentaires

où se trouve l'instruction var {email, password} = this.state; dans votre code?

en fonction onLogin

votre code semble correct. Êtes-vous sûr que l'erreur provient de la fonction onLogin ? vous avez var {email, password} = this.props; au lieu de var {email, password} = this.state;

Je sais alors comment se fait-il que je ne puisse pas passer la valeur :(

passer aux accessoires et après cela, essayer de récupérer des accessoires ne fonctionne pas aussi bien

oh ouais componentWillMount remplace l'initialisation de l'état dans votre constructeur

Pouvez-vous nous montrer la méthode d'action de connexion?

il suffit de le résoudre, j'ai oublié d'attraper les données sur la fonction de connexion de récupération

3 Réponses :

0
votes

Dans la fonction onLogin, vous essayez d'obtenir l'adresse e-mail et le mot de passe des accessoires au lieu de l'état.

0 commentaires

2
votes

Il y a plusieurs choses qui pourraient conduire à une erreur à mon avis.

ComponentDidMount doit utiliser la méthode ComponentInstance.setState

var { email, password } = this.state;

La méthode onLogin fait référence à des accessoires au lieu de l'état

var { email, password } = this.props;

devrait être

componentWillMount() {
  this.setState({ token: localStorage.getItem('token') })
}

La connexion à redux semble déroutante car elle passe tout l'état en tant que propriété logs au composant

1 commentaires

je l'ai changé à this.state, et après avoir enlevé le this.props.dispatch (login (data)); je peux consoler les informations sur les données

3
votes

Au lieu d'utiliser componentWillMount qui est maintenant obsolète, vous devriez initialiser l'état entier à l'intérieur de votre constructeur, vous ne devriez pas réattribuer l'état après cela, pour une mise à jour future, vous devriez utiliser this.setState

 constructor (props) {
   super(props)
   this.state = {
     email: "",
     password: "",
     redirect: false,
     token: localStorage.getItem('token')
   };

   this.onLogin = this.onLogin.bind(this)
   this.onLogout = this.onLogout.bind(this)
}

0 commentaires