Problem beim erneuten Rendern von Komponenten [Snippet Attached]

Question

Ich mache eine Bewerbung für den Resume Builder und die gesamte Struktur war fast fertig.

Vollständiger Arbeitscode und Box:

Hier habe ich Komponenten für jeden Abschnitt zu Stepper gemacht,

index.js

<form onSubmit={handleSubmit}>
        <Stepper
          steps={sections}
          activeStep={currentPage}
          activeColor="red"
          defaultBarColor="red"
          completeColor="green"
          completeBarColor="green"
        />

        {currentPage === 1 && (
          <>
            <BasicDetails />
            <button onClick={next}>Next</button>
          </>
        )}

        {currentPage === 2 && (
          <>
            <EmploymentDetails />
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <button onClick={prev}>Back</button>
              <button onClick={next}>Next</button>
            </div>
          </>
        )}

        {currentPage === 3 && (
          <>
            <pre>{JSON.stringify(value, null, 2)}</pre>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <button onClick={prev}>Back</button>
              <button onClick={handleSubmit}>Submit</button>
            </div>
          </>
        )}
      </form>

Schritte zum Reproduzieren des Problems:

-> In Step 1eingeben First Name, Last NameundProfile Summary

-> Klicken Sie auf die NextSchaltfläche, um zum nächsten Schritt zu gelangen.

-> Klicken Sie dann auf die Schaltfläche Zurück, um rückwärts zu Step 1(Derzeit in Step 2) zu gelangen.

-> Hier sind die Werte in First Name, Last Nameaber der im Texteditor eingegebene Wert geht verloren

Bitte beziehen Sie sich auf das folgende Bild mit dem eingegebenen Texteditor, um das Problem, mit dem ich konfrontiert bin, besser zu verstehen.

Der Wert des Texteditors allein geht verloren, wenn wir forth/backdie Schritte wechseln . Der eingegebene Wert wird jedoch im Formular Kontext gespeichert und nicht im Feld Texteditor gerendert.

Hinweis:

Der Texteditor wird als Komponente erstellt und in Step 1(Zur Profilübersicht) und auch in Step 2(Zur Beschäftigungsbeschreibung) verwendet. In beiden Fällen geht der im Texteditor eingegebene Wert verloren, wenn zwischen den Schritten gewechselt wird.

Analyse:

Nach meinem Verständnis geschieht dies, weil beim Navigieren zu anderen Schritten die Komponente neu gerendert und die EditorContainerKomponente aufgerufen und text_editor.jsangegeben wird

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

Also wurde es als leer erstellt.

Wie kann ich also steuern, dass die Komponente nicht neu gerendert wird, damit die im Texteditor eingegebenen Daten nicht verloren gehen?

Bitte helfen Sie mir, die im Texteditor eingegebenen Werte beizubehalten. Vielen Dank im Voraus ..

Answer 1

Dies geschieht, weil wir unseren EditorContainerWert nur für uns speichern Context, ihn aber nicht verwenden, wenn wir die EditorContainerKomponente erneut rendern .

---

Die Lösung wäre, die valueals Requisite gespeicherte Requisite an unsere EditorContainerKomponente zu übergeben.

Bevor wir das rendern EditorContainer, konvertieren wir das value, EditorStatewas mit der convertFromHTMLFunktion möglich ist, und setzen es als unseren editorStateStatus.

Schritt 1: valueRequisite an übergebenEditorContainer

// basic_details.js
<EditorContainer
 name="profileSummary"
  value={basicDetails.profileSummary}
  onChange={(event) => handleInputChange(event)}
/>

// employment_details.js
<EditorContainer
  name="description"
  value={inputField.description}
  onChange={(event) => handleInputChange(index, event)}
/>

Schritt 2: Konvertieren Sie die valueRequisite inEditorState

// text_editor.js
...

componentDidMount() {
  // https://draftjs.org/docs/api-reference-data-conversion/#convertfromhtml

  const { value } = this.props;
  const blocksFromHTML = convertFromHTML(value);
  const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap,
  );

  const editorState = EditorState.createWithContent(state);
  this.setState({ editorState });
}

Das ist es! Überprüfen Sie die Demo unten.

Bearbeiten Sie die Fix-Demo, um zu überprüfen, valueob es sich um eine Zeichenfolge handelt.

Answer 2

Das ist eine gute Frage. Dies ist im Grunde ein Problem mit dem Entwurfsansatz: Für ein Szenario wie das Ihre müssen Sie Ihre Komponente folgendermaßen entwerfen:

Lassen Sie uns das Bild analysieren:

HAUPTKOMPONENTE:

Dies ist die Komponente, die den Status für den gesamten Formularausfüllprozess beibehalten soll. STE1-4 Sind nur Ansichten, mit denen Sie Daten eingeben können, die alle in der Hauptkomponente aktualisiert werden müssen. Dies bedeutet, dass Sie den Status in der Hauptkomponente haben und die Statuseigenschaften und propseinschließlich ihrer Update / Setter-Methoden übergeben müssen.

SCHRITTKOMPONENTE Dies gilt für alle Schrittkomponenten . Diese Komponenten sollten nichts anderes tun, als den Formularschritt unter Verwendung von Statuswerten anzuzeigen, die über empfangen wurden, propsund den Status mithilfe von Setter-Methoden zu aktualisieren, die auch über empfangen werden props.

---

Fazit:

Fügen Sie Ihren Status in Ihre Hauptkomponente ein. Jede Schrittkomponente sollte nur das Formular anzeigen und den Hauptstatus aktualisieren. Dies bedeutet, dass jede Schrittkomponente beim erneuten Rendern Werte erhält, die in der Hauptkomponente aktualisiert wurden. Und das erreichen Sie über props.

Answer 3

Es ist sehr einfach - Sie müssen den Editorstatus in Ihrer übergeordneten Komponente speichern. Versuchen Sie hierfür den Status BasicDetails zu verwenden.