Javascript concat vs推入式反应js

我还没有反应过来。我不明白为什么这个问题不起作用。 我有

数字组件

const Numbers = (props) => {
  return(
    <div className="card text-center">
        <div>
        {Numbers.list.map((num,i) => 
            <span key={i} onClick={() => props.selectNumbers(num)}>
            {num}
          </span>
        )}
      </div>
    </div>
  );
}

Numbers.list = [1,2,3,4,5,6,7,8,9];

现在，这东西很好用。但是当我这么做的时候

this.setState(prevState => ({
        selectedNumbers: prevState.selectedNumbers.push(clickedNumber)
    }));

该应用程序确实按预期工作

作为prevState.selectedNumbers是一个数组

它不应该是

push

而不是

concat

？

---

我做错了什么？

当您使用

push

时，您正在将

selectedNumbers

设置为push操作的返回值，即根据新数组的长度。Push还试图在状态下对数组进行变异，正如PhilippSpo所说，这是行不通的

---

可以像以前一样使用

concat

，也可以将

selectedNumbers

复制到一个新数组中，将值推入该数组，然后将

selectedNumbers

设置到新数组中。如果您使用的是ES6，您可以像其他用户指出的那样使用spread运算符，正如注释中提到的那样，它是一个变异函数，并返回结果数组的长度。您可以使用来轻松推送新项目

this.setState(prevState => ({
        selectedNumbers: [...prevState.selectedNumbers, clickedNumber]
    }));

---

您应该使用concat（）函数来代替push（），因为react不能很好地处理对象的易变性react人们强调react开发人员保持不变的状态

当您使用concat（）函数时，它总是返回一个新对象，而不是对同一个旧对象进行变异，这就是为什么您不应该在react中使用push（）函数的原因，因为push会变异旧对象。

简而言之：

将一个元素添加到原始数组中，并返回一个整数，该整数是它的新数组

长度

返回一个新数组，其中包含连在一起的元素，甚至不触及原始数组。这是一个肤浅的副本

---

推送是一种变异操作。因此，在前一个状态上调用push将尝试对其进行变异。这就像试图改变历史。您要做的是通过重用旧状态而不改变它来创建新状态。这就是您可以使用concat或ES6 spread运算符执行的操作。

this.setState(prevState => ({
        selectedNumbers: [...prevState.selectedNumbers, clickedNumber]
    }));