Javascript 我必须在React hook中使用spread操作符的原因是什么？

预期行为

要渲染计数器，请在每次单击时增加一个

实际行为

渲染计数器不会增加，但内部会增加（如警报消息所示）。看看这个屏幕截图：（它不是一直都在发生…）

代码

import React, { Component, useState } from "react";
import "./App.css";

function App(props) {
  const [all, setAll] = useState([{ name: "PHP", votes: 1 }]);

  function changeAll() {
    const newAll = all;
    alert(newAll === all); //alert true

    newAll[0].votes++;
    setAll(newAll);

    alert(all[0].votes);
  }

  return (
    <>
      <div className="voteCount">{all[0].votes}</div>
      <div className="lanugageName">{all[0].name}</div>
      <button onClick={changeAll}>Click Here</button>
    </>
  );
}

export default App;

import React，{Component，useState}来自“React”；
导入“/App.css”；
功能应用程序（道具）{
const[all，setAll]=useState（[{name:“PHP”，投票：1}]）；
函数changeAll（）{
const newAll=all；
警报（newAll==all）；//警报为真
newAll[0]。投票++；
setAll（newAll）；
警报（所有[0]。投票）；
}
返回(
{所有[0]。投票数}
{all[0].name}
点击这里
);
}
导出默认应用程序；

我尝试过的：

更改行

const newAll=all->到->
const newAll=[…all]
然后它就起作用了。但是，警报说“假”

问题


为什么我需要使用排列运算符
如果使用扩展运算符，为什么
newAll===all
为false

为什么我需要使用排列运算符

您不需要使用spread语法*，但您确实需要粗略地复制要变异为新对象/数组/内存引用的现有状态。使用扩展语法是实现这一点的方法之一。在使用数组时，使用许多返回新数组的数组函数也是很常见的，即map、filter、slice

如果使用扩展运算符[语法*]，为什么
newAll===all
为false

当您
const newAll=all
也将引用保存到状态
all
到
newAll
时，但是您
const newAll=[…all]
首先将状态扩展到一个新的数组引用中，然后将其保存到
newAll

试试看


const all=[1,2,3]；
const newAll1=全部；
常量newAll2=[…全部]；
console.log（newAll1==all）；//真的
console.log（newAll2==all）；//false
您需要复制
all
，因为您无法直接改变状态。使用“排列”操作符是制作副本的一种方法。数组是对象，所以
==
将比较它们的标识而不是它们的值。@iz_u这是因为数组是按引用而不是按值分配的吗？如果我做newAll=all，那么它们实际上是一样的？我刚想起这个