Question

我有一个基于类的组件，试图将其重构为使用钩子，但遇到了我无法解决的麻烦。我有一个Surveyquestion组件，它将根据创建的问题类型显示一个保管箱，复选框等。但是，当出现新问题时，我似乎无法弄清楚在哪里可以重新初始化基础值。任何帮助是极大的赞赏。我只显示复选框组件功能。

    def website(self, preset):
       if preset.he_school.profile.admissions_url:
          return format_html(
            f"<a href='http://{preset.he_school.profile.url}'>Link</a>"
          )

当前，当我从一个问题转到另一个问题时，旧的答案将继续存在。例如，我不知道可以在哪里重新初始化checkedIndex回到[]。

const [checkedIndex，setCheckedIndex] = useState（[]）;

我尝试将setCheckedIndex（[]）放在几个区域中，并且获得了太多的重新渲染。

Answer 1

可能是因为它在每个渲染之间重用了相同的QuestionComponent组件。我无法对其进行测试，但是我会尝试添加一个唯一的密钥以向React提供一个“提示”，以便在密钥更改时它应该创建一个新组件。

<QuestionComponent
  key={question.uniqueIdOrSomething}
  question={question}
  onChange={onChange}
/>;

uniqueIdOrSomething可能是问题id或问题text（可以唯一标识问题的任何内容）。

通常，key用于列表中，因此如果顺序更改（性能优化），React可以重用组件。但是，它也可以用来告诉React这个组件是不同的，它不应该重用现有的组件并重新实例化它。对于您来说，这将清除现有状态并为您提供新的默认值。我认为这是使用key的正确用例，但是请小心使用这种方法（添加一个key道具），因为它可能掩盖了其他问题。

有关key属性的更多详细信息：https://reactjs.org/docs/lists-and-keys.html

反应挂钩帮助从基于类的组件重构

1 个答案: