React项目中TipTap的useEditor钩子初始返回null问题咨询

问题原因 #

这是TipTap的useEditor钩子的正常设计行为，并非故障：

• 编辑器实例的初始化是异步流程，第一次组件渲染时，扩展注册、内容解析等初始化操作还未完成，所以首次返回固定为null
• 待编辑器完成全量初始化后，会触发组件重渲染，此时useEditor才会返回完整可用的Editor对象。

解决方法 #

1. 访问实例前做空值校验 #

所有调用编辑器实例属性、方法的逻辑，都先判断实例是否存在，避免空值报错：

// 执行业务逻辑前先判空
if (editorUse) {
  console.log(editorUse.getText())
  // 其他编辑器操作逻辑
}

JSX渲染时也可以配合条件渲染处理：

{editorUse && <EditorContent editor={editorUse} />}

2. 用useEffect监听实例初始化完成 #

如果需要在编辑器初始化完成后立刻执行逻辑，可以将editor作为useEffect的依赖项：

useEffect(() => {
  if (!editorUse) return
  // 此处编写初始化完成后要执行的逻辑
  console.log("编辑器初始化完成", editorUse)
}, [editorUse])

3. 配置immediatelyRender参数（可选） #

如果要禁用首次返回null的行为，可以在useEditor的配置项中添加immediatelyRender: false，该配置会让首次渲染等待编辑器初始化完成后再执行，适合编辑器为页面核心内容的场景，缺点是可能带来极短的首屏白屏：

const editorUse = useEditor({
  extensions: [StarterKit],
  content: JSON.parse(localStorage.getItem("text")) ?? "",
  immediatelyRender: false
});

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