reactjs - 富文本编辑器光标不会移动，使文本向后输入

Question

我在 react 功能组件中有一个 RTE，由于某种原因，当输入文本时光标停止向前移动，导致文本向后输入。
现在，我已经知道问题出在哪里，但我没有解决方案。我确实找到了 this问题与他们通过添加 setContentFromString(nextProps.value) 解决的问题相同更新状态时，但出现以下错误

TypeError: react_rte__WEBPACK_IMPORTED_MODULE_5___default.a.setContentFromString is not a function

这是我的组件。

   export default props => {
        const { value, onChange, error, row, readOnly, className, ...rest } = props;
        const [internalValue, setInternalValue] = React.useState(
            value ? RichTextEditor.createValueFromString(unescape(value), 'html') : RichTextEditor.createEmptyValue()
        );
    
        React.useEffect(() => {
            setInternalValue(
                value ? RichTextEditor.createValueFromString(unescape(value), 'html') : RichTextEditor.createEmptyValue()
            );
        }, [value]);
    
        const classes = useStyles({ row });

// the problem area
        function change(value) {
            setInternalValue(value);
            if (onChange) {
                const trimmed = value.toString('markdown').trim();
                if (trimmed.length === 0 || (trimmed.length === 1 && trimmed.charCodeAt(0) === 8203)) {
                    onChange(null);
                } else onChange(escape(value.toString('html')));
            }
        }
    
        return (
            <RichTextEditor
                customStyleMap={customStyles}
                toolbarConfig={toolbarConfig}
                value={internalValue}
                onChange={change}
                readOnly={readOnly}
                toolbarClassName={classes.toolbar}
                editorClassName={clsx(readOnly ? null : classes.editor, error ? classes.error : null)}
                className={clsx(classes.root, className)}
                {...rest}
            />
        );
    };

Answer 1

internalValue被意外设置为随每次击键而变化的值，因此触发了 useEffect并最终将光标设置到位置 1。
通过使用 React.useRef我能够比较更改并使其正常工作。