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]