React+CodeMirror编辑器页面重载后代码不持久化问题排查

你的Editor组件本身是受控组件，它的内容完全依赖父组件传入的value属性。页面重载后编辑器内容丢失但iframe正常，核心问题出在父组件的状态初始化逻辑，而非Editor组件本身：

• 父组件中对应HTML/CSS/JS的state初始值，可能没有从localStorage读取，而是用了空字符串这类默认值。
• 虽然你在代码变更时把内容存进了localStorage，但组件挂载时的加载逻辑可能没正确更新父组件的state，导致Editor拿到的value还是初始空值。

具体修复步骤 #

1. 修正父组件的state初始值
   初始化state时直接从localStorage读取，示例：

   const [html, setHtml] = useState(localStorage.getItem('html') || '<div>Hello</div>');
   const [css, setCss] = useState(localStorage.getItem('css') || '');
   const [js, setJs] = useState(localStorage.getItem('js') || '');
   

2. 确保挂载时的useEffect逻辑正确
   如果初始值没直接从localStorage取，要在组件挂载时用useEffect更新state：

   useEffect(() => {
     const savedHtml = localStorage.getItem('html');
     const savedCss = localStorage.getItem('css');
     const savedJs = localStorage.getItem('js');
     
     if (savedHtml) setHtml(savedHtml);
     if (savedCss) setCss(savedCss);
     if (savedJs) setJs(savedJs);
   }, []); // 空依赖数组确保只在挂载时执行
   

3. 验证存储与读取的键名一致
   检查存localStorage时用的键名（比如localStorage.setItem('html', html)）和读取时的键名完全匹配，避免拼写错误导致读不到值。

4. 确认数据流闭环
   父组件的state更新后，要把最新的html/css/js作为value传给对应的Editor组件，同时在Editor的onChange回调里更新父组件的state并同步存到localStorage，确保数据流完整。

补充说明 #

iframe能正常显示，大概率是因为iframe的内容是直接从localStorage读取渲染的，没有经过父组件的state，所以即使父组件state没加载成功，iframe依然能拿到值。只要把父组件的state初始化逻辑修正，Editor组件就能正常显示localStorage里的代码了。

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