ReactQuill自定义工具栏handler中setState无法切换状态问题（附演示demo）

问题根因 #

你遇到的问题本质是闭包陷阱+ReactQuill不会热更新handler的双重原因导致的：

• 你用useMemo缓存quillModules时，虽然把previewOpen加入了依赖数组，但ReactQuill初始化完成后，即使modules配置变化，也不会重新注册工具栏handler，实际运行时一直调用的是首次初始化时生成的旧handler
• 旧handler捕获的是初始状态下previewOpen = false的闭包值，所以每次点击都只会执行setPreviewOpen(!false)，也就是永远把状态设为true

解决方案 #

修改handler里的状态更新方式为函数式更新，不需要依赖外部的previewOpen变量，函数式更新可以直接拿到最新的状态值，不需要依赖闭包捕获：

const quillModules = useMemo(() => {
  return {
    toolbar: {
      container: `#toolbar-${id}`,
      handlers: {
        preview: function(value){ 
          const html = this.quill.root.innerHTML;
          setPreviewContent(html);
          // 改成函数式更新，不用依赖外部的previewOpen变量
          setPreviewOpen(prev => !prev);
        }
      }
    },
  }
// 移除previewOpen依赖，不需要重新生成modules
}, [id])

修改后不需要额外调整其他代码，点击预览按钮就可以正常切换状态了。

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