React hook useState 方法意外更新数组

Question

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

初始：单击 0 FirstArgument

单击 1 ：单击 1 FirstArgument1

单击 2 ：单击 3 FirstArgument111

单击 3 ：单击 5 FirstArgument11111

...

这是代码狙击：

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;

我的问题是：

1. 为什么代码会这样。 我做错了什么或实现这一目标的正确方法是什么。

2. 如果我替换let updateList = [...variable]; let updateList = prevVariable; state 不再改变。 为什么我们不能使用prevVariable而不是在这里展开数组呢？

Answer 1

我没有在您的代码的任何地方看到setCount或variable定义，所以我无法猜测您是如何实现它们的。 然而， setStateFun只是过于复杂了。

通过使用功能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>
  );
}

在这里看到它：