Question

更新好的，所以我注意到即使在isCategoryActive()函数中，我只变换变量{{1}已经从newCategories this.props.searchCategories prop更改值分配了一个值，因此将其传递给连续数组项searchCategories函数的调用。为什么会发生？更新

我正在基于Wordpress REST API在React中构建博客的前端，并且在检查它们是否已经过滤后，我在创建过滤帖子类别的链接时遇到了问题。我遇到的问题是，即使我在map函数中编写了一个纯函数isCategoryActive，每个连续的类别链接url都包含其中的每个前面的类别id。我原本以为在每次调用一个纯函数时我都会得到一个干净的结果，但就我而言，它并不是那样的。目前wordpress存储了3个类别：＆＃34;未分类的＆＃34; id：1，＆＃34;的javascript＆＃34; id：4，＆＃34;第三类＆＃34; id：10

我试图在render（）函数中获取console.log（newCategories，url）函数来记录：

[1] blog？categories = 1
[4] blog？categories = 4
[10]博客？类别= 10

但目前它记录了：

[1] blog？categories = 1
[1,4]博客？类别= 1,4
[1,4,10]博客？类别= 1,4,10

我不知道它为什么要记录以前的类别ID。

以下是代码：

isCategoryActive

Answer 1

在原始功能中，有以下内容：

let newCategories = this.props.searchCategories

这实际上不会复制searchCategories，而是引用它。他们都指向同一个数组，这也是原始searchCategories数组也被修改的原因。

当您映射searchCategories数组时（就像在自己的解决方案中一样），您正在构建一个新数组（使用push语句）而不修改searchCategories数组。然而，这是制作阵列副本的一种非常复杂的方式。

Answer 2

问题是你在分配

时直接改变this.props.searchCategories

let newCategories = this.props.searchCategories

通过引用分配

您需要创建一个新对象而不是直接分配它。为此，您可以使用扩展运算符，而不是映射到道具array并将项目推送到newCategories数组。

isCategoryActive = (category) => {
    let newCategories = [..this.props.searchCategories]
    newCategories.indexOf(category) === -1
    ? newCategories.push(category)
    : newCategories.splice(newCategories.indexOf(category),1)
    return newCategories
  }

Answer 3

而不是

let newCategories = this.props.searchCategories

你可以写成

let newCategories = this.props.searchCategories.splice();

这将创建一个新的对象。

默认情况下，JavaScript只在我们直接分配对象（以及数组）时复制引用。这就是当新的Object发生变化时，Original也会发生变化。

您必须使用map，splice或Object.assign来创建新对象。

Answer 4

根据更新中的新信息，我发现我已将isCategoryActive功能修改为：

isCategoryActive = (category) => {
    let newCategories = []
    this.props.searchCategories.map(category => newCategories.push(category))
    newCategories.indexOf(category) === -1
    ? newCategories.push(category)
    : newCategories.splice(newCategories.indexOf(category),1)
    return newCategories
  }

现在它工作得很好。但是，我还没有完全理解为什么以前存储以前的记录。我想我错过了一些非常愚蠢的东西，但是如果有人能够首先向我描述根本上出了什么问题，那就太好了。

Javascript数组映射函数保留数组

4 个答案: