1
votes

Que fait cette ligne de code dans une méthode react

   addPerson = (person) => {
     this.setState(prevState => {
     const people = [...prevState.people, person]
     return {people}
    })
   }
The line in question is
const people = [...prevState.people, person]I realize the ...prevState.people
is spreading the previous state of the people array into (a new array?? [ ] ??) i'm confused about what the comma here signifies.

javascript reactjs

0 commentaires

3 Réponses :

2
votes

Vous pouvez considérer [... prevState.people, person] comme une manière élégante d'écrire .push ()

const a = [1, 2, 3];
const b = [...a, 4]; // create a new array, put the elements of 'a' into this new array. Add another element '4' to the end of this new array

console.log(b);

Cependant, il existe est une différence clé, ici, .push modifie le tableau prevState.people . Alors que l'utilisation de:

const b = [...a, 4];

donne un nouveau tableau , en laissant prevState.people intact. Ainsi, vous pouvez enregistrer le nouveau tableau dans une variable. Dans votre exemple, il est enregistré dans la variable people.

Par exemple, si vous prenez le tableau:

const a = [1, 2, 3];

Et répartissez-le dans un autre tableau:

[...prevState.people, person] // "returns" this array

Ensuite, l'opérateur de propagation dit ici de vider / déplacer le contenu de a dans le nouveau tableau , suivi d'un 4 qui est un autre élément du nouveau tableau .

Ainsi la sortie de b code > serait: [1, 2, 3, 4]

prevState.people.push(person) // returns the new length of the `people` array

Vous pouvez en savoir plus sur la syntaxe de diffusion ici

0 commentaires

1
votes

Cela signifie que vous êtes créé un nouveau tableau et que vous insérez person dans ce tableau. C'est ce qu'on appelle l'opérateur de diffusion. Vous pouvez trouver plus d'informations ici

0 commentaires

0
votes

Le code que vous avez fourni est équivalent au code ci-dessous.

this.setState({person:person})

addPerson est une fonction qui transmet la personne en paramètre. Les deux codes définissent l'état de la personne.

this.setState({person:person});

La constante prevState obtient l'état actuel.

const people = [...prevState.people,person];

Le code ci-dessus prend le people object à partir de l'état actuel, met à jour la valeur de la personne, puis la transmet à une variable constante people.

const prevState = this.state;

Le code ci-dessus met à jour l'état de la personne. il peut également être écrit comme ci-dessous.

addPerson = (person) => {
     const prevState = this.state;
     const people = [...prevState.people,person];
     this.setState({person:person});
   }

0 commentaires