Question

因此，这是用户可以在其中添加部分以添加问题（以构建测验）的形式，并且我注意到当我填写Answer Choices并将文件放入我的dropZone（ drop有效，但更新不正确，您可以忽略此）Answer Choices和dropZone重新呈现，并且诸如refresh的字段变为空。

我不太确定为什么会这样，我曾尝试研究类似的问题，但无法使其正常工作。 Here is my CodeSandbox with my App.

我认为它可能是我的addQuestion组件中的Questions函数。这是该代码：

  addQuestion = question => {
    questionIdx++;
    var newQuestion = { uniqueId: uuid(), question: "" }
    this.setState(prevState => ({
      questions: [...prevState.questions, newQuestion]
    }));
    return { questions: newQuestion }
  };

我是React和Js的新手，因此任何技巧/解释都将为您提供帮助。谢谢！

Answer 1

添加新问题并更新Questions组件状态变量questions（数组类型）时，整个组件（Questions及其子代）将经历更新过程，其中它根据新状态重新计算输出DOM树（虚拟DOM），并将其与状态更改前的虚拟DOM进行比较。在“渲染”任何东西之前，它会检查两个版本的虚拟DOM是否彼此不同，如果是，它将尽可能有效地重新渲染那些已更改的部分。

在您的情况下，重新计算会在许多Answers中看到许多Question组件，并且由于Answers没有任何道具，因此它基本上是对其初始状态的全新渲染，包括4个空输入。我能想到的最简单的解决方案是在Questions组件的状态下，确保this.state.questions数组中的每个对象都有一个answers属性（对象数组类型）。在addQuestion方法中，修改var newQuestion = { uniqueId: uuid(), question: "" };，以将该数据包含在与该问题相关的答案上。

然后，在呈现每个单独的问题时，将此回答数据（答案数组）作为道具传递给Answers，并根据索引（对象或字符串）依次传递给每个单独的Answer组件）。同时，您必须将updateAnswers方法作为对Question的支持，然后将其传递给Answers和Answer，当{{1 }}的输入字段已更改。需要将问题ID和答案ID传递给此方法，以最终修改现在应存储在Answer组件状态下的答案数据。我调整了以下沙箱中的代码以遵循以下原则，尽管我不确定要清除所有损坏：

Questions

不需要的React组件重新渲染？

1 个答案: