javascript - QuillJS 选择更改出于某种原因缓存结果

Question

我有:

    useEffect(() => {
        if (quill) {
            quill.clipboard.dangerouslyPasteHTML(documentContent);
            quill.on('text-change', () => {
                setDocumentContent(quill.root.innerHTML);
            });

            quill.on('selection-change', (range, oldRange, source) => {
                console.log(documentState?.predictionStatus, range, oldRange, source);
            })

        }
    }, [quill]);

但是 documentState.predictionStatus保持原来的值(value)。我想可能是因为该值以某种方式被缓存？
有什么办法解决吗？
谢谢!

Answer 1

你的代码看起来像这样吗？

    const [documentState, setDocumentState] = useState();
    useEffect(() => {
        if (quill) {
            quill.clipboard.dangerouslyPasteHTML(documentContent);
            quill.on('text-change', () => {
                setDocumentContent(quill.root.innerHTML);
            });

            quill.on('selection-change', (range, oldRange, source) => {
                console.log(documentState?.predictionStatus, range, oldRange, source);
            })

        }
    }, [quill]);

您正在尝试访问 documentState?.predictionStatus quill.on的处理函数内部这可能会导致错误，因为您传递给 quill.on 的函数只记得 documentState 的值 original (因为 closure )
为了解决这个问题， useRef代替 documentState

    const documentRef = useRef();

    useEffect(() => {
        if (quill) {
            quill.clipboard.dangerouslyPasteHTML(documentContent);
            quill.on('text-change', () => {
                setDocumentContent(quill.root.innerHTML);
            });

            quill.on('selection-change', (range, oldRange, source) => {
                console.log(documentRef.current?.predictionStatus, range, oldRange, source);
            })

        }
    }, [quill]);

/// somewhere in you code update documentRef
documentRef.current = newValue