javascript - QuillJS selection-change cachar resultat av någon anledning

Jag har:

    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]);

Men documentState.predictionStatus förblir på sitt ursprungliga värde. Jag tror kanske att det beror på att värdet på något sätt är cachat?

Finns det något sätt att lösa det?

Tack!

Svar #1

Ser din kod ut så här?

    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]);

Du försöker komma åt documentState?.predictionStatus inuti hanteringsfunktionen för quill.on vilket sannolikt kommer att orsaka ett fel eftersom funktionen du skickar till quill.on bara kommer ihåg det ursprungliga värdet av documentState (på grund av closure)

För att åtgärda detta, använd useRef istället för 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