React quilljs:从useEffect获取初始值

Question

我正在使用react quilljs。请参阅文档中的设置"带有初始值"使用他们的文档，这很好，直到你尝试使用useEffect从数据库中提取初始值。我连续收到错误类型错误：无法从下面的代码行读取未定义的属性(读取"长度"(：

quill.clipboard.dangerouslyPasteHTML(savedIntroText);

知道如何正确处理这个问题吗

const [savedIntroText, setSavedIntroText] = useState();
// Getting text in from database
useEffect(() => {
const fetchResults = async () => {
const result = await axios({
method: "GET",
url: "http://localhost:4000/userData",
withCredentials: true,
});
setSavedIntroText(result.data.introEssayText);
};
fetchResults();
}, []);

//Setting initial Quill value here, as shown in docs:
if (quill) {
quill.clipboard.dangerouslyPasteHTML(savedIntroText);
}

const handleUpdatedIntro = () => {
const text = quill.getText();
setSavedIntroText(text);
};

// ===== Implementing Quill ======

<div ref={quillRef} onInput={handleUpdatedIntro} />;

Answer 1

使用当前代码，在为savedIntroText设置任何值之前调用quill.clipboard.dangerouslyPasteHTML(savedIntroText);(因此您看到的是未定义的错误(。如果您想在API检索到值后粘贴该值，请尝试在加载数据后将其移动到useEffect中，例如：

useEffect(() => {
const fetchResults = async () => {
// Only request/load data once quill is loaded
if (!quill) {
return;
}
const result = await axios({
method: "GET",
url: "http://localhost:4000/userData",
withCredentials: true,
});
quill.clipboard.dangerouslyPasteHTML(result.data.introEssayText);
};
fetchResults();
}, [quill]);