jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

Warning: Can't call setState on a component that is not yet mounted. #1221

Open siddjain opened 2 years ago

siddjain commented 2 years ago

Hello,

I am using this code from https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp:

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';

class ControlledEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={this.onEditorStateChange}
      />
    )
  }
}

and it gives me this warning in chrome dev tools as soon as I click on the control:

react.development.js:220 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the r component.

Here is code sample: https://codesandbox.io/s/boring-silence-jcd9o

image

How can I fix this?

siddjain commented 2 years ago

https://github.com/jpuri/react-draft-wysiwyg/pull/1044