React useState状态异常：编辑模式切换时内部状态丢失问题求助

问题核心分析 #

你遇到的本质问题是：父组件editMode状态变化触发子组件重渲染时，你没有正确处理本地状态的初始化逻辑——如果每次重渲染都把editedHTMLDefinition初始化为null，或者组件因为父组件的条件渲染被卸载重挂载，自然会丢失之前的编辑状态。

具体解决方案 #

1. 避免组件切换模式时被卸载重挂载

如果父组件是通过条件渲染直接卸载编辑器组件（比如{editMode && <Editor />}），切换模式时组件会被完全销毁，状态必然丢失。改成用CSS控制显示/隐藏，保持组件始终挂载：

// 错误写法：切换时组件卸载重挂载
{editMode ? <DescriptionEditor /> : <StaticContent />}

// 正确写法：保持组件挂载，控制显示状态
<div style={{ display: editMode ? 'block' : 'none' }}>
  <DescriptionEditor />
</div>
<div style={{ display: editMode ? 'none' : 'block' }}>
  <StaticContent content={globalContent} />
</div>

2. 正确初始化本地编辑状态

让本地状态仅在全局初始内容更新时同步，而非每次editMode变化都重置：

import { useState, useEffect } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';

function DescriptionEditor({ editMode, initialContent, onSaveGlobal }) {
  // 用全局初始内容初始化本地编辑状态
  const [editedHTMLDefinition, setEditedHTMLDefinition] = useState(initialContent);

  // 仅当全局内容更新时，同步到本地状态（比如其他地方修改了全局内容）
  useEffect(() => {
    if (!editMode) {
      setEditedHTMLDefinition(initialContent);
    }
  }, [initialContent]);

  // Lexical编辑器内容变更时，更新本地状态
  const handleEditorChange = (editorState) => {
    // 这里替换成你将editorState转为HTML的逻辑
    const html = convertEditorStateToHTML(editorState);
    setEditedHTMLDefinition(html);
  };

  // 退出编辑模式时，将本地状态同步到全局
  useEffect(() => {
    if (!editMode && editedHTMLDefinition !== initialContent) {
      onSaveGlobal(editedHTMLDefinition);
    }
  }, [editMode, editedHTMLDefinition, initialContent, onSaveGlobal]);

  return (
    <LexicalComposer initialConfig={{ editorState: editedHTMLDefinition }}>
      <RichTextPlugin
        onChange={handleEditorChange}
        // 其他插件配置...
      />
    </LexicalComposer>
  );
}

3. 用useRef保存状态的正确姿势

如果坚持用useRef，要确保ref.current的初始化只依赖全局初始内容，且编辑时实时更新：

import { useRef, useEffect } from 'react';

function DescriptionEditor({ editMode, initialContent, onSaveGlobal }) {
  const editedRef = useRef(initialContent);

  // 全局内容更新时同步到ref
  useEffect(() => {
    if (!editMode) {
      editedRef.current = initialContent;
    }
  }, [initialContent]);

  const handleEditorChange = (editorState) => {
    const html = convertEditorStateToHTML(editorState);
    editedRef.current = html;
  };

  // 退出编辑时同步全局
  useEffect(() => {
    if (!editMode) {
      onSaveGlobal(editedRef.current);
    }
  }, [editMode, onSaveGlobal]);

  return (
    <LexicalComposer initialConfig={{ editorState: editedRef.current }}>
      <RichTextPlugin onChange={handleEditorChange} />
    </LexicalComposer>
  );
}

关键注意点 #

• 不要在组件每次重渲染时重置本地状态/Ref，仅在全局初始内容变更时同步
• 确保Lexical的initialConfig使用本地保存的状态，而非每次从null开始
• 退出编辑模式的同步逻辑要放在useEffect中，依赖editMode和本地状态触发

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