时间戳

首页 > 解决方案 > 数组引用表现得像一个副本

javascript - 数组引用表现得像一个副本

问题描述

我有一个带有帖子表的简单 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 变量包含对状态数组的引用。正如您在接下来的两行中所看到的，我正在使用较少数量的帖子（其中 99 个）更新状态。我希望我的 oldPosts 引用指向这个 99 元素数组。但是，当它是 console.logged 时，我看到 100 个元素。这是为什么？

标签： javascriptarraysreactjsreference

解决方案

  const oldPosts = this.state.posts;

这会将对数组的引用复制到oldPost变量中。如果里面的数组this.state.posts改变了，你会在里面看到这些改变oldPosts，但是如果引用本身改变了，那么oldPost和this.state.posts指向两个不同的数组。

使用.filter你创建一个新数组。

推荐阅读