Problema de re-renderização do componente [trecho anexado]

Question

Estou fazendo um aplicativo construtor de currículo e toda a estrutura está quase pronta.

Códigosandbox completos de trabalho:

Aqui, transformei os componentes em passo-a-passo para cada seção,

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>

Etapas para reproduzir o problema:

-> Em Step 1Enter First Name, Last NameeProfile Summary

-> Clique no Nextbotão para ir para a próxima etapa.

-> Em seguida, clique no botão Voltar para voltar para Step 1(Atualmente em Step 2)

-> aqui os valores First Name, Last Nameestão lá, mas o valor inserido no editor de texto só se perde

Consulte a imagem abaixo com o valor do editor de texto inserido para melhor compreensão do problema que estou enfrentando.

O valor do editor de texto sozinho se perde se mudarmos forth/backas etapas. Mas o valor inserido é armazenado no formulário Contexto e não é renderizado na caixa Editor de Texto.

Nota:

O editor de texto é feito como um componente e foi usado em Step 1(Para resumo do perfil) e também em Step 2(Para descrição de emprego) e em ambos os casos, alternando entre as etapas, o valor inserido no editor de texto se perde.

Análise:

Pelo meu entendimento, isso acontece porque ao navegar para outras etapas, o componente é renderizado novamente e o EditorContainercomponente é chamado e text_editor.jsnele foi fornecido

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

Portanto, foi criado vazio.

Então, como posso controlar o componente de ser renderizado novamente para que os dados inseridos no editor de texto não sejam perdidos.

Por favor, ajude-me a reter os valores inseridos no editor de texto. Muito obrigado antecipadamente ..

Answer 1

Isso acontece porque estamos apenas salvando nosso EditorContainervalor em nosso Context, mas não o estamos usando quando renderizamos o EditorContainercomponente.

---

A correção seria passar o objeto salvo valuecomo suporte para o nosso EditorContainercomponente.

Então, antes de tornar a EditorContainer, vamos converter essa valuea EditorStateque pode ser feito usando convertFromHTMLa função e defina-o como o nosso editorStateestado.

Etapa 1: passe a valueproposta paraEditorContainer

// 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)}
/>

Etapa 2: converta o valuesuporte emEditorState

// 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 });
}

É isso aí! Confira a demonstração abaixo.

Edite a demonstração de correção para verificar valuese é uma string.

Answer 2

Esta é uma grande pergunta. Este é basicamente um problema de abordagem de design: para um cenário como o seu, você precisa projetar seu componente desta forma:

vamos analisar a imagem:

COMPONENTE PRINCIPAL:

Este é o componente que deve manter o estado de todo o processo de preenchimento de formulários. STE1-4 São apenas visualizações que permitem a entrada de dados que devem ser todos atualizados no componente principal. Isso significa que você deve ter estado no componente principal e passar as propriedades do estado e props, incluindo seus métodos de atualização / setter.

COMPONENTE DE PASSO Isso se aplica a todos os componentes de etapa. Esses componentes não devem fazer nada, exceto exibir a etapa do formulário usando valores de estado recebidos por meio propse atualizar o estado usando métodos setter, que também são recebidos por props.

---

Conclusão:

Coloque seu estado em seu componente principal, cada componente da etapa deve apenas exibir o formulário e atualizar o estado principal. Isso significa que, no momento em que cada componente da etapa for renderizado novamente, ele receberá os valores atualizados no componente principal. E você vai conseguir isso via props.

Answer 3

É muito simples - você precisa armazenar o estado do editor em seu componente pai. Tente usar o estado BasicDetails para isso.