mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-17 12:41:44 +02:00
fix not update state when unmounted (#4819)
* fix not update state when unmounted * add changeset
This commit is contained in:
5
.changeset/hot-beers-poke.md
Normal file
5
.changeset/hot-beers-poke.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'slate-react': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix a possible update of react state after Slate component is unmounted
|
@@ -1,4 +1,4 @@
|
|||||||
import React, { useMemo, useState, useCallback, useEffect } from 'react'
|
import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react'
|
||||||
import { Editor, Node, Element, Descendant } from 'slate'
|
import { Editor, Node, Element, Descendant } from 'slate'
|
||||||
import { ReactEditor } from '../plugin/react-editor'
|
import { ReactEditor } from '../plugin/react-editor'
|
||||||
import { FocusedContext } from '../hooks/use-focused'
|
import { FocusedContext } from '../hooks/use-focused'
|
||||||
@@ -19,6 +19,7 @@ export const Slate = (props: {
|
|||||||
onChange: (value: Descendant[]) => void
|
onChange: (value: Descendant[]) => void
|
||||||
}) => {
|
}) => {
|
||||||
const { editor, children, onChange, value, ...rest } = props
|
const { editor, children, onChange, value, ...rest } = props
|
||||||
|
const unmountRef = useRef(false)
|
||||||
|
|
||||||
const [context, setContext] = React.useState<[ReactEditor]>(() => {
|
const [context, setContext] = React.useState<[ReactEditor]>(() => {
|
||||||
if (!Node.isNodeList(value)) {
|
if (!Node.isNodeList(value)) {
|
||||||
@@ -47,6 +48,7 @@ export const Slate = (props: {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
EDITOR_TO_ON_CHANGE.set(editor, () => {})
|
EDITOR_TO_ON_CHANGE.set(editor, () => {})
|
||||||
|
unmountRef.current = true
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
@@ -59,6 +61,9 @@ export const Slate = (props: {
|
|||||||
useIsomorphicLayoutEffect(() => {
|
useIsomorphicLayoutEffect(() => {
|
||||||
const fn = () => {
|
const fn = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
if (unmountRef.current) {
|
||||||
|
return
|
||||||
|
}
|
||||||
setIsFocused(ReactEditor.isFocused(editor))
|
setIsFocused(ReactEditor.isFocused(editor))
|
||||||
}, 0)
|
}, 0)
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user