React Hook state 更新而不調用 setState

Question

我遇到了一個 React 問題，我的掛鈎 state 在沒有調用 setState 的情況下進行了更新。

  const [dataSet2, setDataSet2] = React.useState([
    [2, 3, 4],
    [5, 6, 7],
    [8, 9, 9],
  ]);

  const badFunction = () => {
    let selections = [];
    let newSelections = [];
    let winPercent = 0;
    let newWinPercent = 1;
    const depth = 2;
    const dataHolderTest = dataSet2;
    let firstWeekTest = dataHolderTest[0];
    const weekOneTeamsTest = firstWeekTest.slice(0, depth);

    for (const weekOneTeamTest of weekOneTeamsTest) {
      let secondWeekTest = dataHolderTest[1];

      newWinPercent = weekOneTeamTest.win_percent * newWinPercent;
      newSelections.push(weekOneTeamTest.team);
      for (const team2 of secondWeekTest) {
        removeAllSelectedTeams(newSelections, secondWeekTest, team2);
      }
    }

    console.log(dataSet2);

};

  const removeAllSelectedTeams = (selections, dataHolder, team) => {
    if (selections.includes(team.team)) {
      const currentTeam = dataHolder.indexOf(team);
      dataHolder.splice(currentTeam, 1);
    }
    return dataHolder;
  };

我已經仔細研究了一段時間，似乎removeAllSelectedTeams function 是問題所在。

我仍然不明白如何在不調用掛鈎setDataSet2的情況下更改我的dataSet2

Answer 1

如果你想復制一個數組或一個 object，你需要這樣做。 listTwo = [...listOne]或ObjectTwo = {...ObjectOne} 。 簡單地使用=而不使用展開運算符不會為您復制該數組或 object，而是為您提供對同一數組或 object 的另一個引用。

Answer 2

嘗試將數組復制到dataHolderTest而不是使用擴展運算符將其分配為等於dataSet2 ...

這樣您在與dataHolderTest交互時不會更改原始dataSet2變量

const dataHolderTest = [...dataSet2]