1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-16 20:24:01 +02:00

fix not update state when unmounted (#4819)

* fix not update state when unmounted

* add changeset
This commit is contained in:
Masanori Onoue
2022-02-05 20:36:25 +09:00
committed by GitHub
parent 4b97197f9a
commit 80661509ec
2 changed files with 11 additions and 1 deletions

View File

@@ -0,0 +1,5 @@
---
'slate-react': patch
---
Fix a possible update of react state after Slate component is unmounted

View File

@@ -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)
} }