1
votes

Référence de tableau se comportant comme une copie

J'ai une application React simple avec un tableau des articles:

Au début, l'application a toujours 100 messages.

Voici comment je gère l'opération DELETE:

  handleDelete = async post => {
    const oldPosts = this.state.posts;

    const posts = this.state.posts.filter(n => n.id !== post.id);
    this.setState({ posts });

    try {
      await axios.delete(`${apiEndpoint}/${post.id}`);
      console.log(oldPosts);
    } catch (e) {
      alert("There was an error while removing post " + post.id);
    }
  };

javascript reactjs arrays reference

0 commentaires

4 Réponses :

0
votes

Vous attribuez 100 messages à oldPosts . Ensuite, vous filtrez les messages pour obtenir un nouveau tableau et enregistrer dans l'état. Le filtre renvoie un nouveau tableau et ne met pas à jour le tableau actuel, c'est-à-dire oldPosts . Si vous voulez ce comportement, vous pouvez utiliser Array.prototype.splice

https: //developer.mozilla .org / en-US / docs / Web / JavaScript / Reference / Global_Objects / Array / splice

0 commentaires

0
votes

Vous ne mettez pas à jour l'état de vos anciens messages. cela devrait fonctionner

  this.setState({ oldPosts : posts });

Merci

1 commentaires

Je n'avais pas l'intention de faire ça, mais merci pour votre contribution

1
votes

Je m'attendrais à ce que ma référence oldPosts pointe vers ces 99 éléments déployer. Cependant, quand c'est console.logged, je vois 100 éléments. Pourquoi est-ce ça?

Belle question, permettez-moi d'essayer de vous expliquer. Voyez le cas, le tableau sera stocké dans un emplacement de mémoire et this.state.posts aura la référence à ce tableau . Vous faites référence au même tableau par oldPosts , cela signifie que oldPosts pointe vers le tableau et non vers this.state.posts code >.

Lorsque nous mettons à jour la valeur de this.state.posts , il aura une nouvelle référence, une référence au tableau nouvellement créé, pas à l'ancien tableau . Mais cet oldPosts pointera toujours vers l'ancien tableau.

Même si vous attribuez une valeur autre qu'un tableau, cela n'affectera jamais la valeur de oldPosts .

Vérifiez cet exemple, vous aurez une meilleure idée:
let a = [1, 2, 3, 4];
let b = a;

/* 
  a and b both points to same array, but if we assign a 
   new value to a, b will still points to array
*/

a = 10;

// by changing the value of a, it will not affect b
console.log('a', a);

// still point to array
console.log('b', b);
Vérifiez cet autre exemple:
// consider this as state obj
let obj = {
  posts: [1, 2, 3, 4],
}

let oldPosts = obj.posts;
let newPosts = obj.posts.filter(el => el < 4);

// same as setState
obj.posts = newPosts;

// still point to old array
console.log('oldPosts', oldPosts);

// it will have the new array
console.log('obj.posts', obj.posts);

obj.posts = 10;

// now it will have a totally new value
console.log('obj.posts', obj.posts);

2 commentaires

Merci beaucoup, de très beaux exemples!

heureux, cela vous a aidé :)

3
votes

  const oldPosts = this.state.posts;
That copies the reference to the array into the oldPost variable. If the array inside this.state.posts get changed, you will see those changes inside oldPosts, but if the reference itself gets changed, then oldPost and this.state.posts point to two different arrays.Using .filter you do create a new array.

0 commentaires