web-dev-qa-db-fra.com

Remplacer l'entrée de tableau par la syntaxe spread dans une ligne de code?

Je remplace un élément dans un tableau d'état de réaction en utilisant la syntaxe ... spread. Cela marche:

let newImages = [...this.state.images]
newImages[4] = updatedImage
this.setState({images:newImages})

Serait-il possible de faire cela dans une ligne de code? Quelque chose comme ça? (ça ne marche pas évidemment ...)

this.setState({images: [...this.state.images, [4]:updatedImage})
javascriptreactjsspread-syntax
5
Kokodoko

utilisez Array.slice

this.setState({images: [...this.state.images.slice(0, 3), updatedImage, ...this.state.images.slice(4)]})
13
Bardia Rastin

Il n'y a pas de syntaxe qui fournit cela, non. Object.assign fait le travail:

this.setState({images: Object.assign([...this.state.images], {4: updatedImage}));

... mais implique un objet temporaire (celui à la fin). Reste que le seul objet temporaire ...

Cela fonctionne parce que les tableaux normaux JS ne sont pas vraiment des tableaux1, ce sont des objets avec des fonctionnalités spéciales. Leurs "index" sont en fait des noms de propriétés répondant à certains critères2. Donc, là, nous dispersons this.state.images dans un nouveau tableau, nous le passons dans Object.assign comme cible et donnons à Object.assign un objet avec une propriété nommée "4" (oui, il s’agit finalement d’une chaîne mais nous sommes autorisés à l’écrire comme un nombre) avec la valeur que nous voulons mettre à jour.

Exemple en direct:

const a = [0, 1, 2, 3, 4, 5, 6, 7];
const b = Object.assign([...a], {4: "four"});
console.log(b);

Si le 4 peut être variable, c'est très bien, vous pouvez utiliser un nom de propriété calculé (nouveauté dans ES2015):

let n = 4;
this.setState({images: Object.assign([...this.state.images], {[n]: updatedImage}));

Notez le [] autour de n.

1 Divulgation: C'est un post sur mon petit blog anémique.

2 C'est le deuxième paragraphe après la liste à puces:

Un index entier est une clé de propriété à valeur chaîne qui est une chaîne numérique canonique (voir 7.1.16) et dont la valeur numérique est soit +0 ou un entier positif ≤ 2.53-1. Un index de tableau est un index entier dont la valeur numérique i est dans la plage +0 ≤ i <2.32-1.

Donc, Object.assign fait la même chose que votre create-the-array-then-update-index-4.

9
T.J. Crowder

Vous pouvez utiliser la carte:

const newImages = this.state.images
  .map((image, index) => index === 4 ? updatedImage : image)
7
CD..

Voici mon explicite non-one-liner

 const wantedIndex = 4;
 const oldArray = state.posts; // example

 const updated = {
     ...oldArray[wantedIndex], 
     read: !oldArray[wantedIndex].read // attributes to change...
 } 

 const before = oldArray.slice(0, wantedIndex); 
 const after = oldArray.slice(wantedIndex + 1);

 const menu = [
     ...before,  
     updated,
     ...after
 ]
0
webmaster