Question

我有一个react.js应用，可以从API中加载数据，显示一堆问题（textboxes，radiolist，checkboxes等）。用户将其填入并将所有答案提交回API，然后API会发送一组新问题。

所有这些问题都在一个对象中，因此我创建了parent react.js组件，该组件保存当前状态的问题集。当状态改变时，它会重新呈现下面的每个问题。这非常好。

问题在于，有时API会连续两次显示完全相同的问题，但是因为它处于状态并且react.js足够聪明，知道它不需要渲染一个全新的组件，因为旧的会做（有一些小的更新）。

问题在于，如果我在第一个上选择一个单选按钮，则基于存储在子组件状态中的初始数据，该初始数据最初是在componentDidMount中设置的。但是当第二个问题出现时，因为它基本上是相同的组成部分，国家仍然存在。不再调用构造函数。

我想我应该使用其他事件之一，或许：

但我无法弄清楚哪一个是最一致的。

每当父级从API接收到新数据并基本上重新渲染所有子组件时，我基本上都希望重置selectedAnswer（但反应不会做到这一点）。

修改

我不知道是不是试图通过内部生命周期事件来重置它，而是我可以将一组不同的道具传递给组件，因此它可以决定是以通常的方式重新创建还是重新渲染。 / p>

Answer 1

好的，所以为了最佳地做到这一点，假设你回复了一组问题的api，它可能包含一些与之关联的id。使用该id为每个子组件创建一个uniq键，同时呈现如下所示

<Child key={`${data_id}_${index}`} />

这将确保对于同一组它们不会一次又一次地保持安装，并且只有在获取新数据集时才会挂载，在这种情况下data_id将改变，这将导致重新安装每个子组件

Answer 2

我建议您查看Redux。它使管理状态变得更加容易。我在这里贡献了一些代码，但我不确定我是否真的理解了这个问题。如果你把我们链接到你的Github，那么我可以回答这个具体的问题。

此外，您似乎并不需要触摸州。这听起来更像生活附加事件和控制状态。例如，使用onSubmit，您可以进行API调用（以及其他任何内容），然后使用另一个函数来重置表单状态。这将是非常直接的，特别是如果你使用then / catch Promises。