组件重新渲染问题[附加代码段] [英] Component re-render issue [Snippet Attached]

问题描述

我正在制作一个简历生成器应用程序，整个结构都差不多了.

完整的工作代码和框:

在这里，我将每个部分的组件制作成步进器，

index.js

 < form onSubmit = {handleSubmit}><步进步骤= {sections}activeStep = {currentPage}activeColor =红色".defaultBarColor =红色".completeColor =绿色".completeBarColor =绿色"；/>{currentPage === 1&&(<>< BasicDetails/>< button onClick = {next}>下一步</button></>)}{currentPage === 2&&(<>< EmploymentDetails/>< div style = {{display:'flex'，justifyContent:'space-between'}}>< button onClick = {prev}>返回</button>< button onClick = {next}>下一步</button></div></>)}{currentPage === 3&&(<>< pre> {JSON.stringify(value，null，2)}</pre>< div style = {{display:'flex'，justifyContent:'space-between'}}>< button onClick = {prev}>返回</button>< button onClick = {handleSubmit}> Submit</button></div></>)}</form> 

重现问题的步骤:

->在<代码>步骤1 中，输入<代码>名字，<代码>姓氏和<代码>配置文件摘要

->点击 Next 按钮进入下一步.

->然后单击后退"按钮后退到步骤1 (当前在步骤2 中)

->这里的 Firstname ， Last Name 中的值在那里，但是仅在文本编辑器中输入的值会丢失

请参考下图并输入文本编辑器值，以更好地了解我面临的问题.

如果

向前/向后切换步骤，则仅

文本编辑器值会丢失.但是输入的值以上下文"形式存储，而不在文本编辑器"框中呈现.

注意:

将文本编辑器作为组件制作，并且在步骤1 (用于个人资料摘要)和步骤2 (用于职业描述)中使用了这两种方法在步骤之间切换时，在文本编辑器中输入的值会丢失.

分析:

根据我的理解，发生这种情况是因为导航到其他步骤后，该组件被重新渲染，并且 EditorContainer 组件被调用，并且在 text_editor.js 中给

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

因此它被创建为空.

因此，我该如何控制该组件免于重新渲染，以免在文本编辑器中输入的数据丢失.

请帮助我保留在文本编辑器中输入的值.在此先感谢您.

解决方案

之所以会发生这种情况，是因为我们只是将 EditorContainer 值保存到我们的 Context 中，但是重新渲染 EditorContainer 组件时不使用它.

---

解决方法是将保存的 value 作为属性传递给我们的 EditorContainer 组件.

然后，在渲染 EditorContainer 之前，我们将把 value 转换为 EditorState ，可以使用

I am making a resume builder application and the whole structure was almost done.

Complete working codesandbox:

Here I have made components into stepper for each section,

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>

Steps to reproduce issue:

-> In Step 1 Enter First Name, Last Name, and Profile Summary

-> Click on Next button to move to next step.

-> Then click the back button to move backward to Step 1 (Currently in Step 2)

-> Here the values in First Name, Last Name are there but the value entered in text editor alone gets lost

Please refer the below image with text editor value entered for better understanding of the problem I am facing..

Text editor value alone gets lost if we switch forth/back the steps. But the entered value is stored in the form Context and not rendered in the Text Editor box.

Note:

Text editor is made as a component and it was used in Step 1 (For profile summary) and also in Step 2 (For employment description) and in both cases switching between steps, the value entered inside the text editor gets lost.

Analysis:

Based on my understanding, this happens because on navigating to other steps, the component get re-rendered and the EditorContainer component gets called and in text_editor.js it was given

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

So it was created as empty.

So how can I control the component from getting re-rendered so that the data entered in text editor won't get lost.

Kindly please help me to retain the values entered inside the text editor. Big thanks in advance..

解决方案

This happens because we're only saving our EditorContainer value to our Context, but we're not using it when we rerender the EditorContainer component.

---

The fix would be to pass the saved value as prop to our EditorContainer component.

Then before we render the EditorContainer, we'll convert that value to EditorState which can be done using convertFromHTML function, and set that as our editorState state.

Step 1: Pass value prop to EditorContainer

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

Step 2: Convert the value prop to EditorState

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

That's it! Check the demo below.

Edit Fix demo to check value if is string.

这篇关于组件重新渲染问题[附加代码段]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！