React Hook 状态更新而不调用 setState答案

【问题标题】：React Hook state updating without calling setStateReact Hook 状态更新而不调用 setState
【发布时间】：2021-09-28 17:58:25
【问题描述】：

我在使用 React 时遇到了问题，我的钩子状态在没有调用 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 函数是问题所在。

我仍然不明白我的dataSet2 是如何在不调用钩子setDataSet2 的情况下被更改的

【问题讨论】：

.splice 改变当前状态。
这能回答你的问题吗？ How to delete an item from state array?
@EmileBergeron 但我没有在 dataSet2 上运行 .splice 仅在它的副本上。
将其分配给另一个标识符不会复制。
我不确定我是否理解。

标签： javascript reactjs react-hooks

【解决方案1】：

如果你想复制一个数组或一个对象，你需要这样做。 listTwo = [...listOne] 或 ObjectTwo = {...ObjectOne}。简单地使用= 而不使用扩展运算符不会为您复制该数组或对象，而是为您提供对同一数组或对象的另一个引用。

【讨论】：

【解决方案2】：

尝试将数组复制到dataHolderTest，而不是使用扩展运算符... 将其分配为等于dataSet2

这样你在与dataHolderTest交互时不会改变原来的dataSet2变量

const dataHolderTest = [...dataSet2]

【讨论】：