Javascript 如何在react.js中执行子组件验证而不使用无限循环_Javascript_Reactjs

Javascript 如何在react.js中执行子组件验证而不使用无限循环

javascript reactjs

Javascript 如何在react.js中执行子组件验证而不使用无限循环,javascript,reactjs,Javascript,Reactjs,我在react中有一个非常简单的例子。父组件通过props将数据传递给子组件。在子组件内部，我可以更改此数据，也可以随时将新数据从父组件传递给子组件。在父级上，我还有保存按钮。按下后，如果某些验证未通过，我将显示验证消息。我以这种方式实施了它。从父级，我通过回调通知父级数据的有效性已更改。在child内部，我在三个位置执行验证： componentDidMount-验证初始数据组件将接收props-验证可从父级传递的数据 onChange验证输入的数据任何时候，当孩子执行数据验证时，我都

我在react中有一个非常简单的例子。父组件通过

props

将数据传递给子组件。在子组件内部，我可以更改此数据，也可以随时将新数据从父组件传递给子组件。在父级上，我还有保存按钮。按下后，如果某些验证未通过，我将显示验证消息。我以这种方式实施了它。从父级，我通过回调通知父级数据的有效性已更改。在child内部，我在三个位置执行验证：

```
componentDidMount
```
-验证初始数据
```
组件将接收props
```
-验证可从父级传递的数据
```
onChange
```
验证输入的数据任何时候，当孩子执行数据验证时，我都会调用回调来通知家长数据的有效性。问题出在
```
组件willreceiveprops
```
中。在父项中设置状态时，此部分会导致无限循环-请参见下图。请检查控制台中的此处，您可以看到我将无限循环限制为10次迭代，以防止浏览器崩溃

正如您所看到的，存在无限循环-因为React调用

组件将以不太智能的方式接收道具

-每个渲染周期，而不是仅在道具实际更改时调用它。

我真的很想知道解决这个问题的方法是什么。我应该只在child中存储子状态吗？我还试图将孩子的有效性存储在州外的父母中——但我的同事说这不是反应方式——为什么

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

您希望在子组件中包含验证方法，因为它特定于此类子组件（例如密码输入字段）。-但在react中，不允许任何外部组件（子组件除外）直接调用此方法
您希望您的家长了解每个子组件的验证（例如，确定所有字段的验证和允许表单提交）-因此您需要家长组件中验证方法的结果，这必须是状态

您的同事是正确的：react不喜欢您将组件范围的变量存储在状态之外。因为这些变量完全独立于react生命周期方法等，并且会让您很快进入调试地狱

我建议您进行以下更改，以防止无休止的循环：

不要将子项的有效性存储在子项状态中。将结果+任何消息保存在父级中，并将其作为道具传递给子级。Child只渲染道具
实现
```
shouldComponentUpdate（）
```
，检查是否有任何道具或状态变量已更改。如果不返回
```
false
```
，否则返回
```
true
```
将对
```
validate（）
```
的调用从
```
componentWillReceiveProps
```
移动到
```
componentWillUpdate（）
```
。这是在
```
shouldComponentUpdate（）
```
之后调用的。因此，只有当道具或子状态发生更改时，才会进行验证（和重新渲染）

谢谢。这就是我要找的。另外一个注意事项。在子组件中，将有两个执行validaion的位置componentWillUpdate和componentDidMount-用于初始验证，因为在初始呈现期间不会调用componentWillUpdate。最终的JSFIDLE是的，您可以将验证留在componentDidMount中。这只发射一次，所以不可能有无止境的循环不需要检查道具是否真的改变了，因为在初始坐骑中并没有以前的道具可以比较。