Can't call setState on a component that is not yet mounted. - React

Viewed 414

I am creating a React component using an npm wysiwyg. When the page loads, I grab some user data from a context I have set up. I grab the user's name and cover letter which is some html code. When the page loads I want to change the wysiwyg's state to contain the cover letter that way it displays it to the user. It works the first time the page loads, however if I hit refresh or try to open the page again, the contents of the wysiwyg disappear. Upon inspection of the console, I am met with a

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 n component.

I am unsure of what I am doing wrong.

Here is my component:

import React, { useContext, useEffect, useState } from 'react';
import { LoggedInContext } from './contexts/LoggedIn';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, ContentState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import htmlToDraft from 'html-to-draftjs';
import './Profile.css';

const ProfileSettings = () => {
  const { user, coverLetter } = useContext(LoggedInContext);
  const blocksFromHtml = htmlToDraft(coverLetter);
  const { contentBlocks, entityMap } = blocksFromHtml;
  const contentState = ContentState.createFromBlockArray(
    contentBlocks,
    entityMap
  );
  const editorState = EditorState.createWithContent(contentState);

  const [editorStateReact, setEditorStateReact] = useState(editorState);

  const onEditorStateChange = (editorState) => {
    setEditorStateReact(editorState);
  };
  return (
    <div className="Profile">
      <h2>User: {user}</h2>
      <Editor
        editorState={editorStateReact}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onEditorStateChange}
      />
      <button className="btn btn-lg btn-primary my-3">Save Profile</button>
    </div>
  );
};

export default ProfileSettings;
0 Answers
Related