[komplekt_17]

Всем здрасьте. У меня приложение react-redux. Мне нужно подгрузить динамически обновляемые пропсы в один из компонентов (./popups/EditNotePopup.js) с своим стейтом. Так вот сейчас нужные пропсы подгружаются только при повторном вызове(при повторном нажатии кнопки editNote). Я подозреваю, что некорректно использую componentWillReceiveProps(). Подскажите, как сделать правильно и почему?

import React, { Component } from "react";
import $ from "jquery";
import { serialiseEditorStateToRaw } from "draftjs-conductor";
import {
  EditorState,
  ContentState,
  convertFromHTML,
  convertFromRaw
} from "draft-js";
import { convertToHTML } from "draft-convert";
import { DraftailEditor, BLOCK_TYPE, INLINE_STYLE } from "draftail";
import {
  exporterConfig,
  CustomIcon,
  BR_ICON,
  UNDO_ICON,
  REDO_ICON
} from "../components";

import "draft-js/dist/Draft.css";
import "draftail/dist/draftail.css";

//для справки, если потребуется
[url]https://www.draftail.org/docs/controlled-component[/url]
[url]https://draftjs.org/docs/api-reference-content-state[/url]

export class EditNotePopup extends Component {
  
  getContent = stringHTML => {
    const blocksFromHTML = convertFromHTML(stringHTML);
    const content = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks
    );
    return content;
  };

  state = { editorState: EditorState.createEmpty() };

  onChange = editorState => this.setState({ editorState: editorState });

  clearEditor = () => {
    this.setState({ editorState: EditorState.createEmpty() });
  };

  componentWillReceiveProps() {
    if (this.props.textEditedNote !== "") {
      this.setState({
        editorState: EditorState.createWithContent(
          this.getContent(this.props.textEditedNote)
        )
      });
    }
  }

  // for export text note toHTML
  toHTML = raw =>
    raw ? convertToHTML(exporterConfig)(convertFromRaw(raw)) : "";

  render() {
    return (
      <div
        id="modal-editNote"
        className="modal fade"
        tabIndex={-1}
        role="dialog"
        aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">EditNote</h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form
              id="formEditNote"
              onSubmit={ev => ev.preventDefault()}
              className="needs-validation"
              noValidate
            >
              <div className="modal-body">
                <div className="form-label-group">
                  <label htmlFor="editTextNote">Text Note</label>
                  <DraftailEditor
                    editorState={this.state.editorState}
                    onChange={this.onChange}
                    }}
                  />
                </div>
              </div>
              <div className="modal-footer">
                <button
                  onClick={() => {
                    $("#modal-editNote").modal("hide");
                    const idNote = this.props.idNote;
                    const editedTextNote = this.toHTML(
                      serialiseEditorStateToRaw(this.state.editorState)
                    );
                    this.props.editNote(idNote, editedTextNote);
                    this.clearEditor();
                  }}
                  type="button"
                  className="btn btn-success btn-block mt-3"
                >
                  SAVE
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

link full project
https://codesandbox.io/s/noteeditors-co2pe