javascript - React——改变与组件无关的状态触发最大更新深度错误

Question

我想我在这里误解了什么。

我有一个 child 接收 1) 一个 bool 值来通知 parent 的提交事件，以及 2) 一个回调以在提交事件发生时发送信息

<VariationForm      
    isSubmitting={this.state.isSubmitting}
    submittingHandler={this.receiveChildFormSubmit}
/>;

当父提交事件触发时:

submitForm = () => {
    this.setState({isSubmitting: true})
}

子组件将收到这个新的 isSubmitting 状态，触发回调将“子表单”数据传递给父组件。

// in the parent
receiveChildFormSubmit = (formData) => {
    this.setState({product_variations: formData})
}  

子组件监听此 isSubmitting 状态的变化，此时它将传递来自 componentWillReceiveProps 的相关数据。

componentWillReceiveProps = (nextProps) => {
        if (nextProps.isSubmitting)
            this.props.submittingHandler(this.state.product_variations)

我知道这可能有点反模式，但是表单的子部分是表单中行为很重的部分，我想将它们分开。

问题是，我收到了Uncaught Error: Maximum update depth exceeded.

这听起来可能是由其父级中的状态更改触发的处理程序随后正在更改其父级的状态，从而引起另一个触发器，从而产生无限循环。

但我不明白的是，此回调更改 product_variations 的状态永远不会传递给 VariationForm，所以为什么它会再次传递 props ？

知道如何防止这种循环情况吗？

Answer 1

在您的子组件 componentWillReceiveProps 中，您似乎正在调用父函数，该函数更新状态并在父组件中触发重新渲染，导致再次调用子组件 componentWillReceiveProps从而进入循环。

需要在子组件componentWillReceiveProps中添加一个check

componentWillReceiveProps = (nextProps) => {
        if ((nextProps.isSubmitting !== this.props.isSubmitting) && nextProps.isSubmitting)
            this.props.submittingHandler(this.state.product_variations)
         }
}