2
votes

ReactJS: Impossible d'obtenir la longueur d'une chaîne dans l'état du composant

J'ai un petit problème. Dans ma fonction isLoginOk () il n'entre jamais dans le if . Il entre à chaque fois dans le else même si ma chaîne est plus longue que 1 car.

Quand je console.log avant le if je peut voir que ma chaîne est plus longue que 1 mais elle n'entre pas dans le if !

Pourquoi cela? (J'ai vérifié que la chaîne dans mon état de composant est correctement mise à jour par handleChange())

export default class InputLogin extends React.Component {
        constructor(props) {
            super(props);
        this.state = {
            login: "",
        }
    };

    handleChange = (e) => {
        this.setState({
            [e.target.name]: [e.target.value]
        });
    }

    isLoginOk() {
        if (this.state.login.length > 1) {
            return (<div>OK</div>);
        } else {
            return (<div>ERROR</div>);
        }
    }

    render() {
        return (
            <div>
                <input type="text" name="login" value={this.state.login} onChange={this.handleChange} /> {this.isLoginOk()}
            </div>
        );
    }
}

reactjs

2 commentaires

React est un framework pour JavaScript, il ne change pas le fonctionnement de JavaScript. Donc, si this.state.login.length> 1 n'est jamais true , vous ne définissez pas correctement la valeur de this.state.login . Avez-vous vérifié que e.target.name correspond à ce que vous attendez?

Bonjour, je l'ai fait c'est bien

3 Réponses :

3
votes

Cela ressemble à une incohérence avec la façon dont vous définissez l'état du composant dans handleChange () par rapport à la façon dont isLoginOk () s'attend à ce que l'état soit défini.

p> Dans la fonction handleChange () , la syntaxe "crochet carré" [e.target.value] signifie que vous définissez la valeur d'état pour la clé [e.target.name] en tant que tableau:

handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value // Remove the [ and ] around value
    });
}

La fonction isLoginOk () cependant, s'attend à ce que la valeur soit un chaîne plutôt qu'un tableau:

isLoginOk() {

    // You're accessing the string directly and not as an array item
    if (this.state.login.length > 1) {
        return (<div>OK</div>);
    } else {
        return (<div>ERROR</div>);
    }
}

Pensez à réviser votre fonction handleChange () comme ceci pour vous assurer que l'état est mis à jour d'une manière compatible avec isLoginOK():

 this.setState({
        // Brackets around [e.target.value] creates array value
        [e.target.name]: [e.target.value] 
 });

4 commentaires

Bonne prise! Il serait utile d'expliquer ce que signifie [...] autour de e.target.value et pourquoi cela fait toujours échouer la condition.

@FelixKling merci - Je viens de mettre à jour la réponse avec un détail et une documentation supplémentaires

Bonjour, c'était ça le problème. Cependant, ma variable de connexion a été correctement mise à jour. C'est un comportement étrange mais vous avez trouvé le problème. Merci

Je viens de le faire. J'avais besoin de 2 minutes pour le faire à cause de mon dernier message;) merci et merci pour l'explication

0
votes

Supprimez les crochets autour de e.target.value

Simplifiez également le rendu et supprimez la fonction isLoginOk. Cela semble inutile.

<input type="text" name="login" value={this.state.login} onChange={this.handleChange} /> 
<div>{ this.state.login.length > 1 ? 'OK' : 'ERROR' }</div>

0 commentaires

1
votes

Il y a un bogue dans votre code, dans votre valeur handleChange .

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>


<div id="app"></div>

Vous définissez la valeur de this.state.login à ['some input'] . Votre validation échoue toujours car vous ne pouvez pas obtenir la longueur de la chaîne à l'intérieur du tableau en utilisant this.state.login.length . Votre validation renverra 0 ou 1 en fonction de la longueur du tableau, certainement pas ce que vous vouliez.

Pour résoudre ce problème, supprimez les crochets autour de [e.target.value] .

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: white;
}

class InputLogin extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      login: ""
    }
  }
  
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  
  render() {
    const { login } = this.state;
    const loginResult = login.length > 1 ? "OK" : "ERROR";
    
    return (
      <div>
        <input type="text" name="login" value={login} onChange={this.handleChange} />
        {loginResult}
      </div>
    )
  }
}

ReactDOM.render(<InputLogin />, document.querySelector("#app"))

[e.target.name]: [e.target.value]

http://jsfiddle.net/n5u2wwjg/261779/ p>

0 commentaires