React报错：Maximum update depth exceeded，输入交互触发错误原因排查

这个问题我之前也碰到过，核心是触发了状态更新→组件重渲染→事件触发的无限循环，咱们一步步拆解原因和解决方案：

错误原因拆解 #

1. 事件触发与状态更新的冲突
   你在TextEditor的contentEditable元素上用了onKeyDown事件，每次按键都会调用props.setContent（也就是父组件的setValues），直接更新父组件的values状态。

2. 重渲染导致的循环触发
   父组件状态更新后，会触发LessonContents和TextEditor重新渲染。重新渲染时，TextEditor的div会把innerHTML设置为最新的props.content——这个操作会修改contentEditable元素的内容。

   关键问题来了：浏览器修改contentEditable内容后，会再次触发输入相关事件（比如你的onKeyDown），事件处理函数又会调用setValues更新状态，形成状态更新→重渲染→事件触发→状态更新的无限循环，最终超过React的最大更新深度限制。

   另外，LessonLocation组件如果也采用了类似的直接在输入事件中触发状态更新的逻辑，也会加剧这个循环问题。

解决方案 #

我们可以从两个方面调整代码，打破循环：

1. 替换事件类型，精准监听内容变化

把onKeyDown换成onInput事件——onInput只会在contentEditable元素的内容实际发生变化时触发，不会像onKeyDown那样在按下方向键、功能键等非输入按键时也触发，能有效减少不必要的状态更新。

2. 用局部状态管理编辑器内容，避免直接覆盖

在TextEditor内部维护一个局部状态，用来管理编辑器的实时内容，同时通过useEffect同步父组件传递的初始值或外部更新。这样可以避免每次父组件状态更新都直接覆盖编辑器内容，从根源上切断循环。

修改后的TextEditor代码示例：

import React, { useState, useEffect } from 'react';

export default function TextEditor(props) {
  // 局部状态管理编辑器内容
  const [localContent, setLocalContent] = useState(props.content);

  // 当父组件传递的content变化时，同步到局部状态（比如初始加载或外部修改）
  useEffect(() => {
    setLocalContent(props.content);
  }, [props.content]);

  const handleInput = (e) => {
    const newContent = e.target.innerHTML;
    // 只有当内容真的变化时，才更新局部状态并通知父组件
    if (newContent !== localContent) {
      setLocalContent(newContent);
      props.setContent('content', newContent);
    }
  };

  return (
    <div
      suppressContentEditableWarning={true}
      id='editor'
      contentEditable
      onInput={handleInput}
      dangerouslySetInnerHTML={{ __html: localContent }}
    />
  );
}

3. 检查LessonLocation组件

同样要检查LessonLocation组件的逻辑，如果它也是直接在输入事件中调用setValues且没有做值比较，需要做类似的调整：只有当新值和当前值不同时，才触发状态更新。

这样调整后，就能打破无限循环，解决"Maximum update depth exceeded"的错误了。

内容的提问来源于stack exchange，提问作者devamat