Slate.js切换编辑器时内容不更新问题求助

核心结论 #

不用重新初始化Slate Editor，也未必需要路由，关键是手动同步新内容到现有Editor实例——因为initialValue仅在组件挂载时生效，后续修改不会触发内容更新。

具体解决方案 #

1. 监听Redux中currentEditor的内容变化，手动同步到Slate实例
   Slate的<Editable>不会自动响应initialValue的变更，你需要借助Slate的API主动替换内容。在编辑器组件中添加如下逻辑：

   import { Editor, Transforms } from 'slate';
   import { useSlate } from 'slate-react';
   import { useSelector } from 'react-redux';
   
   const EditorComponent = () => {
     const editor = useSlate();
     // 从Redux获取当前选中编辑器的内容
     const currentContent = useSelector(state => state.editor.currentEditor.content);
   
     // 当currentContent变化时，同步到Slate Editor
     useEffect(() => {
       if (!currentContent || !editor) return;
   
       // 先清空现有内容，再插入新内容
       const range = {
         anchor: Editor.start(editor, []),
         focus: Editor.end(editor, []),
       };
       Transforms.delete(editor, { at: range });
       Transforms.insertNodes(editor, currentContent);
     }, [editor, currentContent]);
   
     // 其余渲染逻辑...
     return <Editable />;
   };
   

2. 为什么initialValue不生效？
   initialValue是Slate组件的初始化属性，只有在组件第一次挂载时才会被用来填充内容。当你切换编辑器时，组件并未销毁重建，所以即便传入新的initialValue，Slate也不会处理这个变化。

3. 路由是可选方案，而非必须
   如果给每个编辑器分配独立路由（比如/editor/:id），路由参数变化会触发组件卸载再挂载，此时新的initialValue会生效。但这种方式会带来额外的组件重建开销，对于单页内的编辑器切换，手动同步内容的效率更高。

4. Redux Toolkit配合的注意点

   • 切换编辑器时，确保Redux store中不仅更新currentEditor的ID和标题，还要正确从localStorage读取对应编辑器的内容并同步到store中。
   • 可以在slice中定义专门的action来更新当前编辑器内容，确保状态流转清晰：

     import { createSlice } from '@reduxjs/toolkit';
     
     const editorSlice = createSlice({
       name: 'editor',
       initialState: {
         currentEditor: { id: '', title: '', content: [] },
         editors: [],
       },
       reducers: {
         setCurrentEditor: (state, action) => {
           // 从localStorage读取对应编辑器内容
           const savedContent = localStorage.getItem(`editor_${action.payload.id}`);
           state.currentEditor = {
             ...action.payload,
             content: savedContent ? JSON.parse(savedContent) : [],
           };
         },
       },
     });
     

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