如何以编程方式设置ReactQuill富文本编辑器的内容

• 同时使用受控组件赋值和原生Quill API赋值，逻辑冲突：ReactQuill 受控模式下会自动同步value属性到编辑器内容，无需手动调用setContents，两者同时操作会导致内容被覆盖
• 未判断编辑器实例是否初始化完成：useEffect执行时机可能早于ReactQuill实例挂载，editor_ref.current可能为null，直接调用方法会抛出错误导致逻辑中断
• 接口调用语法错误：原代码中getDataFromAPI.then缺少调用括号，正确写法应为getDataFromAPI().then
• 未处理异步返回时组件已卸载的边界场景：如果接口返回前组件已经卸载，调用setValue会触发React警告

修改后可运行的代码如下：

const editor_ref = React.useRef(null);
const [value, setValue] = React.useState('');
const isMounted = React.useRef(true);

const handleChange = (value) => {
  setValue(value);
};

const getData = () => {
  // 补上接口调用的括号
  getDataFromAPI().then((data) => {
    // 先判断组件是否还挂载，避免内存泄漏警告
    if (!isMounted.current) return;
    if (data && data.data) {
      // 受控模式下直接修改state即可，无需手动调用setContents
      setValue(data.data);
    }
  });
};

React.useEffect(() => {
  getData();
  return () => {
    isMounted.current = false;
  };
}, []); 

return (
  <div style={{ padding: "20px", maxWidth: "520px", margin: "auto" }}>
    <div className="text-editor">
      <ReactQuill
        theme="snow"
        value={value}
        onChange={handleChange}
        placeholder={"Write something awesome..."}
        ref={editor_ref}
      />
    </div>
  </div>
);

补充说明：如果你的接口返回的是纯文本或者HTML字符串，上面的代码可以直接运行；如果返回的是Quill Delta格式的对象，也可以直接传入value属性，ReactQuill会自动识别处理。

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