web-dev-qa-db-fra.com

Reactjs setState syntaxe de la fonction de flèche

Selon les React Docs , nous pouvons avoir deux méthodes pour setState, l'une avec la syntaxe de l'objet et l'autre avec la fonction indiquée

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

Ma compréhension de la syntaxe arrow function est la même que () => {} où les parenthèses de fleur sont suivies après la flèche =>, mais comme dans l'exemple, il s'agit d'accolades rondes au lieu de parenthèses de fleur

Quelle est la différence entre ces syntaxes ()=>{} et ()=>({}).

Exemple de code essayé conformément à la documentation qui fonctionne lorsque la syntaxe this.setStage(prevStage=>({})) est utilisée dans la fonction handleClick et si vous le modifiez en this.setState(prevStage=>{}), il ne basculera pas la valeur du bouton. 

Ci-dessous le code de travail:

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn : true
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
          }));
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'ON' : "OFF"}
                </button>
            </div>
        );
    }
}
javascriptreactjsecmascript-6
6
Chandre Gowda

Plus tard, j'ai mentionné MDN et trouvé des détails dans la section Syntaxe avancée, à savoir que si vous voulez renvoyer des objets implicitement, nous devons le placer entre (), cela a répondu à ma question.

// Entre parenthèses le corps de la fonction pour renvoyer une expression littérale d'objet: 

params => ({foo: bar})

7
Chandre Gowda

Il y a 2 points principaux à considérer ici: 

  1. Comment flèche fonctionne fonctionne?

  2. Qu'attend setState lors du passage de function en tant que paramètre? 

Réponses: 

  1. Les fonctions fléchées peuvent renvoyer une valeur implicitement ou explicitement.
    Quand Il n'y a pas de corps de fonction (pas d'accolade {}), alors vous retournez implicitement: 

    const x = () => 'we are returning a string here';

    Lorsque nous utilisons un corps de fonction, nous devons utiliser la clé return de Word: 

    const x = () => {
  return 'another string returned'
};

    Il existe une autre option permettant de renvoyer un élément sans la touche return Word. Vous pouvez envelopper l'accolade bouclée avec des parenthèses (). Ceci signalera au moteur que l'accolade n'est pas un corps de fonction Mais un objet, ceci est considéré comme créant une expression: 

    const x = () => ({myKey: 'some string'});

    Ceci est similaire à ce que nous faisons habituellement avec les expressions de fonction.
    Surtout avec IIFE (I mm immédiatement I nvoked F onction E xpression):

    (function() {
    //some logic...
})();

    Si nous ne retournons rien, alors la fonction retournera simplement undefined.

  2. Quant à setState, lorsque vous transmettez une fonction en tant que paramètre, il s'attend à ce que cette fonction retourne un objet.
    Lorsque votre fonction n'a rien retourné (comme indiqué ci-dessus), elle a en fait retourné undefined.
    JavaScript ne générera pas d'erreur, car ce n'est pas le cas. sa juste une fonction qui ne retourne rien (undefined). 

Voici un exemple en cours d'exécution de votre code sans les parenthèses d'habillage: 

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => {
      return { // we must return an object for setState
        isToggleOn: !prevState.isToggleOn
      } 
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : "OFF"}
        </button>
      </div>
    );
  }
}


ReactDOM.render(<Toggle />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Modifier
Suite à vos commentaires 

Je m'attendrais à ce que Javascript jette une erreur lorsque nous renvoyons simplement key: value sans parenthèses, c'est-à-dire que () => {clé: valeur} - ce qui signifie il essaie de renvoyer 'key: value' et non Object, et cela devrait être une erreur JS, mais il n'a pas jeté d'erreur. S'il vous plaît corrigez-moi si mon la compréhension est fausse

Il ne renvoie pas de valeur de clé, il s'agit d'une fonction "void" qui renvoie undefined.
Voir l'extrait en cours d'exécution: 

const x = () => {myKey: 'myValue'};
const y = x();
console.log(y);

Edit # 2
Suite à vos autres commentaires (ce qui est fondamentalement une question complètement différente à mon avis). 

let y = function () {'abc': 1} - erreur de syntaxe, let y = function () {abc: 1} et que y = function () {return {'abc': 1}} - pas d’erreur, où la première (erreur de syntaxe) nous essayons d'affecter 1 à la chaîne abc, qui est identique en tant que 3ème échantillon (pas d'erreur) et 2ème exemple en affectant 1 à abc - works quand il n'y a pas de citations. S'il vous plaît expliquer la différence de ces 3 échantillons et pourquoi 1er échec et pas 2ème exemple

OK, ça devient intéressant. 

où le premier (erreur de syntaxe) nous essayons d’attribuer 1 à la chaîne abc ...

Non nous ne sommes pas.
Nous essayons de créer un label: , mais les étiquettes ne peuvent pas être des chaînes!
Identique aux variables ne peut pas être des chaînes - var 'x' = 1.

Ceci est une syntaxe valide en JavaScript:

const y = function(){b:2};

Nous créons ici un label: named a et cette étiquette a pour expression 1 (nous ne faisons rien avec cette étiquette.) .

const x = () => {a:1};
const y = function(){a:1};

Cette syntaxe n'est pas valide: 

const y = function() { 'a': 1 };

Ceci n'est pas valide car les étiquettes ne peuvent pas commencer par une chaîne: 

const x = () => { 'a': 1 };
const y = function() { 'a': 1 };

Et encore une fois, ce n'est pas une paire key:value, l'accolade est le corps DE LA FONCTION. 

5
Sagiv b.g

Si vous écrivez seulement () => {}, cela signifie explicitement que la fonction fait plus que simplement renvoyer quelque chose.

Par exemple:

const logAndReturn = (val) => {
  console.log(val)
  return val
}

Mais disons que vous avez une fonction qui prend des paramètres et renvoie un objet basé sur ces paramètres.

const createUser = (x) => { 
  prop: x
}

Cela provoquera une erreur, car cela se traduit essentiellement par:

function createUser(x) { 
  prop:x 
}

Avec les parenthèses, vous utilisez toujours le retour par défaut de la fonction flèche.

const createUser = (name, email) => ({})
function createUser(name, email) { return {} )
0
Fralle

la réponse simple est 

()=>({})

aussi c'est égal à 

()=> {
   return {}
 }

renvoie un objet vide, entre parenthèses autour de {} signifie return. de plus, vous savez que nous devons passer un objet à setState pour insérer tout ce que nous voulons indiquer entre {} 

()=>({any thing you want to set to state})
0
MBehtemam