如何在react.js中执行没有无限循环的子组件验证

Question

我的反应非常简单。父组件通过props将数据传递给子组件。在子组件内部我可以更改此数据，也可以随时将新数据从父组件传递给子组件。另外在父母我有保存按钮。按下它之后，如果某些验证没有通过，我应该显示验证消息。 我已经以这种方式实现了它。从父级我传递回调来通知父级数据的有效性已经改变。在孩子里面我在三个地方进行验证：

• componentDidMount - 验证初始数据
• componentWillReceiveProps - 验证可以从父
传递的数据
• onChange验证输入的数据 任何时候孩子执行数据验证我都会调用回调来通知父母有效性。问题出在componentWillReceiveProps。在父级中使用setState会导致无限循环 - 请参见下图。 请检查jsfiddle在控制台中，您可以看到我将无限循环限制为10次迭代，以防止浏览器崩溃。

正如你所看到的那样，存在无限循环 - 因为React调用componentWillReceiveProps并不是太聪明 - 每个渲染周期而不是callind它只在道具实际改变时。 我真的想知道解决这个问题的反应方式是什么。我应该只在儿童中存储儿童状态吗？我还尝试将孩子的有效性存储在父母的州内 - 但是我的同事说这不是反应方式 - 为什么？

Answer 1

以下是我如何看待您的挑战：

• 您希望在子组件中使用验证方法，因为它特定于此类型的子级（例如，密码输入字段）。 - 但是在做出反应时，不允许外部组件（孙子孙女除外）直接调用此方法。
• 您希望您的父母知道每个子组件的有效性（例如，确定所有字段的验证和允许表单提交） - 因此您需要父组件中验证方法的结果，并且这必须是州

您的同事是正确的：反应不像您在州外存储组件范围的变量。因为这些变量完全独立于反应生命周期方法等，并且可以让你快速调试地狱。

我建议你进行以下更改以防止无限循环：

• 不要将孩子的有效性存储在子女状态。保存结果+父母中的任何消息，并将其作为道具传递给孩子。孩子只渲染道具。
• 实现shouldComponentUpdate()，它检查是否有任何道具或状态变量发生了变化。如果不返回false，则返回true。
• 将您的来电从validate()移至componentWillReceiveProps至componentWillUpdate()。这是在shouldComponentUpdate()之后调用的。因此，只有当道具或子状态发生变化时，才会进行验证（并重新渲染）。