React useState setter 内的更新被调用两次

我正在尝试更新 useState setter 范围内的内容。这正如我在以下 codepen 示例中所期望的那样：

更新状态变量之外的值

但正如我的应用程序中所实现的insideCallCount每人都会被叫两次toggleCell称呼。相关部分见下文：

  const callCount = useRef(0);
  const insideCallCount = useRef(0);
  const toggleCell = (i) => {
    callCount.current += 1;
    setPattern((pattern) => {
      let newPattern = deepCopyPattern(pattern);
      newPattern[i][selectedSound].on = !newPattern[i][selectedSound].on;
      insideCallCount.current += 1;
      return newPattern;
    });
    console.log('callCount: ', callCount.current);
    console.log('insideCallCount: ', insideCallCount.current);
  };

我多次“切换”按钮后，控制台读数如下所示：

callCount:  1
insideCallCount:  0
callCount:  2
insideCallCount:  2
callCount:  3
insideCallCount:  4
callCount:  4
insideCallCount:  6
callCount:  5
insideCallCount:  8
callCount:  6
insideCallCount:  10

我的理解这与它包含在函数定义中这一事实有关。我尝试将整个内容包装在 useCallback 中，并使用值在依赖项数组中进行监视，但这没有帮助。我缺少什么？

通常情况下，当 React 应用程序中出现意外情况时：请确保StrictMode被禁用。你会发现它被包裹着<App/>默认情况下在你的index.js新的 create-react-app 版本上的文件。我只能通过用它创建一个新项目然后删除它来重现/修复这个问题。

是否要保留它取决于您。当您创建生产版本时，它不会被包含在内，并且可以帮助识别应用程序中的潜在问题。在测试代​​码的过程中，它将双重调用各种生命周期方法（在类组件中）和挂钩（在功能组件中），以突出显示在哪些地方可能会发生意外的副作用。futureReact 的版本。

为此，文档建议not产生以下任何副作用：

• 类组件构造函数、render 和 shouldComponentUpdate 方法
• 类组件静态 getDerivedStateFromProps 方法
• 功能组件体
• 状态更新函数（setState 的第一个参数）
• 传递给 useState、useMemo 或 useReducer 的函数

该列表取自有关严格模式的文档.