如何重置孩子的状态reactjs组件

我有一个react.js应用程序，它从API加载数据显示一堆问题（textboxes,radiolist,checkboxes等）。用户填写并提交所有答案给API，然后发送一组新的问题。如何重置孩子的状态reactjs组件

所有这些问题都在一个单一的对象，所以我创建保持当前的一组状态问题父react.js组件。当状态改变时，重新呈现下面的每个问题。这工作非常好。

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

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

我想我应该用其他的事件之一，可能是：

componentWillReceiveProps
componentWillMount
componentWillUpdate

，但我想不出哪一个是最一致的。

我基本上想要重置selectedAnswer每次父从API接收新数据，并基本上重新呈现所有子组件（但反应不会这样做）。

编辑

我不知道，而不是试图通过内部生命周期事件重置此，我是否可以在一组不同的道具到组件传递，因此它可以决定是否要重新创建或重新以通常的方式进行。

来源

2017-08-28 peter.swallow

更改组件的''key'告诉'React'它是一个*不同的*组件。 – Sulthan

好了，以最佳方式做这让想你的API返回的一系列问题，它可能包含一些id与它相关联。使用该ID创建为每个子组件的uniq的关键，而呈现类似下面

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

这将确保在同一组，他们不守一次又一次的安装，并只安装是否有新的数据集被取出在这种情况下data_id将会改变，这将导致每个重新挂载和每一个孩子组成

来源

2017-08-28 21:21:33

我试图摆弄子组件的关键，但找不到任何改变的ID，除了使用日期时间。它也有点像解决方法。我想知道是否应该在组件中传递额外的道具，所以它可以适当地决定是否应该重新创建组件，而不是仅仅传递新的道具。 –

实际上键不是解决方法。密钥存在以操纵反应如何协调dom本身 –

我会鼓励你检查出终极版。它使管理状态变得更容易。我会在这里提供一些代码，但我不确定是否真的理解了这个问题。如果你将我们链接到你的Github上，那么我可以回答这个具体问题。

而且，好像你并不真的需要接触的状态。听起来更像是附加事件和控制状态的生活。例如，使用的onsubmit，你可以调用API（以及任何其他），然后有其他功能之后重置表单状态。这将是非常直接的，特别是如果你使用then/catch Promises。

来源

2017-08-29 02:09:12

我打算在将来使用redux，但不知道是否可以解决此问题，因为它更多地涉及react.js组件的生命周期。我已经使用承诺和事件，但是你是否建议我不需要在状态中保存那些顶级数据？事实上，我从来没有直接改变这个状态，只是把它作为道具来传递。我想知道是否需要调整传递给我的组件的道具，以便它可以决定重新创建组件，而不是重新创建组件。 –

如何重置孩子的状态reactjs组件

回答

相关问题