Javascript React hook useState方法意外更新数组

我正在学习React hook并尝试更新数组值。我想要实现的是，当单击按钮时，第一个元素的名称和计数器执行+1操作。但是，代码会执行两次该操作。所以按钮显示

初始：单击0 FirstArgument

单击1：首先单击1

单击2：首先单击3

单击3：单击5或11111

以下是代码snipe：

import React, { useState } from "react";

function HookCount() {
  const initState = [
    {
      counter: 0,
      name: "FirstArgument",
    },
    "SecondArgument",
  ];

  const [variable, setCount] = useState(initState);

  const setStateFun = () => {
    setCount((prevVariable) => {
      let updateList = [...variable];
      updateList[0].name = prevVariable[0].name + 1;
      updateList[0].counter = prevVariable[0].counter + 1;
      updateList[1] = prevVariable[1];
      return updateList;
    });
  };

  return (
    <div>
      <button onClick={setStateFun}>
        Click {variable[0].counter} {variable[0].name}
      </button>
    </div>
  );
}

export default HookCount;

我的问题是：

为什么代码的行为如此。我做错了什么，或者什么是实现这一目标的正确方法

如果我替换let updateList=[…变量]；使用let updateList=prevVariable；国家不再改变。为什么我们不能在这里使用prevVariable而不是扩展数组

我看不到在代码的任何地方定义了setCount或变量，所以我猜不出您是如何实现它们的。然而，它只是过于复杂了

通过使用setState，您已经可以访问prevVariable。要执行增量，可以简化如下：

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

export default function App() {
  const [variable, setCount] = useState([
    {
      counter: 0,
      name: "FirstArgument"
    },
    "SecondArgument"
  ]);

  const setStateFun = () => {
    setCount(prevVariable => [
      {
        counter: prevVariable[0].counter + 1,
        name: prevVariable[0].name + 1
      },
      prevVariable[1]
    ]);
  };

  return (
    <div>
      <button onClick={setStateFun}>
        Click {variable[0].counter} {variable[0].name}
      </button>
    </div>
  );
}

请看这里：

---

当我删除代码中的一些旧注释时，我不小心删除了定义。。。定义常量[variable，setCount]=useStateinitState；位于定义和状态初始化之间。谢谢@Brandon！您提供的代码可以工作！然而，我仍然很好奇，为什么我放在那里的实现会导致状态改变两次——在我看来，一次点击按钮就会呈现两次