IT技术 - 组件重新渲染问题 [附加片段] - 吾爱随笔录

组件重新渲染问题 [附加片段]

IT技术 javascript reactjs

2021-04-27 18:37:16

我正在制作简历构建器应用程序，整个结构几乎完成。

完整的工作代码和框：

这里我把每个部分的组件都做成了步进器，

索引.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>

重现问题的步骤：

-> 在Step 1Enter First Name, Last Name, 和Profile Summary

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

-> 然后单击后退按钮向后移动到Step 1（当前在Step 2）

- >这里的值First Name，Last Name是有，但在单独的文本编辑器输入的值丢失

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

如果我们切换forth/back步骤，单独的文本编辑器值就会丢失。但是输入的值存储在表单上下文中，而不是在文本编辑器框中呈现。

笔记：

文本编辑器是作为一个组件制作的，它用于Step 1（用于个人资料摘要）和Step 2（用于就业描述），在这两种情况下，在步骤之间切换时，在文本编辑器中输入的值会丢失。

分析：

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

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

所以它被创建为空。

那么如何控制组件不被重新渲染，以便在文本编辑器中输入的数据不会丢失。

请帮助我保留在文本编辑器中输入的值。非常感谢提前..

3个回答

发生这种情况是因为我们只是将我们的EditorContainer值保存到我们的Context，但是当我们重新渲染EditorContainer组件时我们没有使用它。

解决方法是将保存的valueprops传递给我们的EditorContainer组件。

然后在渲染之前EditorContainer，我们将使用函数将其转换value为EditorState可以完成的convertFromHTML，并将其设置为我们的editorState状态。

第 1 步：将valueprop传递给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)}
/>

第 2 步：将valueprops转换为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 });
}

而已！检查下面的演示。

编辑修复演示以检查value是否为字符串。

这是一个很好的问题。这基本上是一个设计方法问题：对于像您这样的场景，您需要以这种方式设计您的组件：

我们来分析一下图片：

主要成分：

这是应该为整个表单填写过程保持状态的组件。STE1-4 只是允许您输入必须在主组件中全部更新的数据的视图。所以这意味着，你必须在主组件中有状态并传递状态属性和props，包括它们的更新/设置方法。

踏板组件 这适用于所有步骤组成。 这些组件除了使用props通过props.

结论：

把你的状态放在你的主组件中，每个步骤组件应该只显示表单并更新主状态。这意味着在重新渲染每个步骤组件时，它将接收主组件中更新的值。您将通过props.

这很简单 - 您需要在父组件中存储编辑器状态。尝试为此使用 BasicDetails 状态。

其它你可能感兴趣的问题

上一篇如何将 Materialise Magics 项目导出为 STL 文件？下一篇关于电机轴的“3 h5”是什么意思？