反应挂钩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;，状态将不再改变。为什么我们不能使用prevVariable而不是在此处展开​​数组？

Answer 1

在代码的任何位置都看不到setCount或variable定义，因此我无法猜测您是如何实现它们的。但是，setStateFun太复杂了。

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

在这里查看：