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>
  );
}

在這里看到它：