How to fix 'Unhandled Rejection (Invariant Violation): invalid RawDraftContentState' React JS

manpreet Best Answer 2 years ago

I am trying to pull the saved editor data from the database by using the API, but I am getting the error 'Unhandled Rejection (Invariant Violation): invalid RawDraftContentState', on this line const convertedState = convertFromRaw(JSON.parse(eventContent)); please help me to fix

I am using Draft Js Plugin in React Js for WYSIWYG editor for saving and retrieving the data.

Imports

import {Editor, EditorState, RichUtils, convertFromRaw} from "draft-js";

On Click

<Button basic size={'small'} fluid onClick={this.eventEditModalHandler.bind(this, event.slug)}>EditButton>

Ajax request for retrieving data (Response is coming fine)

Http.get(EVENT + '/' + slug).then(response => {
    let data = response.data;
    let eventContent = data.event_content;
    const convertedState = convertFromRaw(JSON.parse(eventContent));
    const editorValue = EditorState.createWithContent(convertedState.getCurrentContent());

    this.setState({
        editorState: editorValue
    })
})

Tags

<BlockStyleControls
    editorState={editorState}
    onToggle={this.toggleBlockType}
/>
<InlineStyleControls
    editorState={editorState}
    onToggle={this.toggleInlineStyle}
/>
<div className={className} onClick={this.focus}>
    <Editor
        blockStyleFn={getBlockStyle}
        customStyleMap={styleMap}
        editorState={editorState}
        handleKeyCommand={this.handleKeyCommand}
        onChange={this.onChange}
        placeholder="Tell a story..."
        ref="editor"
        spellCheck={true}
    />
div>

Thanks in advance

manpreet 2 years ago

Did you ever find a solution to this?