数组引用的行为类似于副本

Question

我有一个带有帖子表的简单React应用程序：

一开始，应用程序始终有100条信息。

这是我处理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);
    }
  };

oldPosts变量包含一个用于发布状态数组的REFERENCE。如您在接下来的两行中所看到的，我正在使用较少的帖子（其中99篇）更新状态。我希望我的oldPosts参考指向此99个元素的数组。但是，在console.logged时，我看到100个元素。为什么会这样？

Answer 1

  const oldPosts = this.state.posts;

将对数组的引用复制到oldPost变量中。如果this.state.posts内部的数组被更改，您将在oldPosts内部看到这些更改，但是如果引用本身被更改，则oldPost和this.state.posts指向两个不同的数组。

使用.filter确实创建了一个新数组。

Answer 2

  

我希望我的oldPosts引用指向此99个元素   数组。但是，在console.logged时，我看到100个元素。为什么是   那？

很好的问题，让我尝试解释。可以看到情况是，数组将存储在某个内存位置，并且this.state.posts将引用该array。您通过array引用了同一oldPosts，这意味着oldPosts指向数组而不是this.state.posts。

当我们更新this.state.posts的值时，它将有一个新的引用，引用到新创建的array，而不是旧数组。但是该oldPosts仍将指向旧数组。

即使您分配数组以外的任何值，也不会影响oldPosts的值。

检查此示例，您将获得一个更好的主意：

// 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);

再次查看此示例：

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);

Answer 3

您正在将100 posts分配给oldPosts。然后，您正在过滤posts以获取新数组并保存状态。过滤器返回一个新数组，并且不更新实际数组，即oldPosts。如果您想要这种行为，可以使用Array.prototype.splice

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

Answer 4

您没有更新oldPosts状态。  这应该工作

  this.setState({ oldPosts : posts }); 

谢谢